@extends('layouts.portal')

@section('title', 'Create Client - Complete Onboarding')

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

@section('content')
    <style>
        /* Disable spinner/increment-decrement buttons on ALL number inputs */
        /* Chrome, Safari, Edge, Opera */
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
            display: none;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        /* Prevent text selection on spinner area */
        input[type=number]::selection {
            background: rgba(0, 0, 0, 0.1);
        }
    </style>
    <div class="min-h-screen bg-gray-50 py-4">
        <!-- Header -->
        <div class="mb-6 bg-white rounded-2xl shadow-lg p-6 border border-gray-100 mx-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-14 h-14 bg-gradient-to-br from-green-600 to-green-800 rounded-2xl flex items-center justify-center shadow-lg mr-4">
                        <i class="fas fa-user-plus" style="color: white !important; font-size: 1.5rem;"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-800">Complete Client Onboarding</h1>
                        <p class="text-gray-500 mt-1 flex items-center text-sm">
                            <i class="fas fa-info-circle text-green-600 mr-2"></i>
                            Fill all details. Client will be created at the end.
                        </p>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <a href="{{ route('agent.dashboard') }}" class="flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl transition-all">
                        <i class="fas fa-arrow-left mr-2"></i>Back
                    </a>
                </div>
            </div>
        </div>

        <form action="{{ route('agent.clients.store') }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-2xl shadow-xl overflow-hidden mx-6" id="clientForm" novalidate>
            @csrf
            
            <!-- 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"></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">
                        <i class="fas fa-check-circle text-green-500 text-xl mr-3"></i>
                        <div class="text-sm text-green-700">
                            Client created successfully with all details! Redirecting to dashboard...
                        </div>
                    </div>
                </div>
            </div>

            <!-- Stepper Navigation - 7 Steps -->
            <div class="bg-white px-6 pt-6 pb-2 border-b border-gray-200">
                <div class="flex items-center justify-between max-w-4xl mx-auto">
                    @php
                        $stepItems = [
                            ['id' => 'personal', 'label' => 'Personal', 'icon' => 'fa-user', 'color' => 'green'],
                            ['id' => 'contact', 'label' => 'Contact', 'icon' => 'fa-phone', 'color' => 'teal'],
                            ['id' => 'emergency', 'label' => 'Emergency', 'icon' => 'fa-exclamation-circle', 'color' => 'orange'],
                            ['id' => 'account', 'label' => 'Account', 'icon' => 'fa-lock', 'color' => 'green'],
                            ['id' => 'family', 'label' => 'Family', 'icon' => 'fa-users', 'color' => 'purple'],
                            ['id' => 'assets', 'label' => 'Assets', 'icon' => 'fa-home', 'color' => 'blue'],
                            ['id' => 'liabilities', 'label' => 'Debts', 'icon' => 'fa-credit-card', 'color' => 'red'],
                            ['id' => 'kyc', 'label' => 'KYC', 'icon' => 'fa-file-upload', 'color' => 'indigo'],
                        ];
                    @endphp
                    
                    @foreach($stepItems as $index => $step)
                        <div class="flex flex-col items-center cursor-pointer step-item" onclick="showTab('{{ $step['id'] }}')">
                            <div class="w-10 h-10 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center transition-all step-circle" id="{{ $step['id'] }}-circle">
                                <i class="fas {{ $step['icon'] }}" style="color: white !important;"></i>
                            </div>
                            <span class="text-xs mt-1 text-gray-400 step-label" id="{{ $step['id'] }}-label">{{ $step['label'] }}</span>
                        </div>
                        @if($index < count($stepItems) - 1)
                            <div class="flex-1 h-1 bg-gray-200 mx-2 rounded-full overflow-hidden" style="max-width: 60px;">
                                <div class="h-full bg-green-600 transition-all" id="connector-{{ $index }}" style="width: 0%"></div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
            
            <div class="border-b border-gray-200"></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" style="color: white !important;"></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 identifications</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Identification Type (FIRST) -->
                            <div class="group md:col-span-2">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-passport text-red-500 mr-2 text-base"></i>
                                    ID Type <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <select name="identification_type" id="identificationType" required 
                                            class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900">
                                        <option value="">Select type</option>
                                        <option value="ic" selected>IC Number (NRIC)</option>
                                        <option value="passport">Passport</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 text-sm"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- FOR IC HOLDERS: First Name, Last Name, A/L, A/P -->
                            <div id="ic-name-section" class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-user text-red-500 mr-2 text-base"></i>
                                    First Name <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="first_name" id="firstName" 
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400"
                                           placeholder="Enter first name">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-pen text-sm"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- FOR IC HOLDERS: Last Name -->
                            <div id="ic-lastname-section" class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-user text-red-500 mr-2 text-base"></i>
                                    Last Name <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="last_name" id="lastName" 
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400"
                                           placeholder="Enter last name">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-pen text-sm"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- FOR IC HOLDERS: A/L (Ayah) / Father's Name -->
                            <div id="ic-al-section" class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-male text-blue-500 mr-2 text-base"></i>
                                    A/L (Father's Name) <span class="text-gray-500 text-xs ml-1">(Optional)</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="father_name_al" id="fatherNameAL" 
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400"
                                           placeholder="Father's name (for NRIC formatting)">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-pen text-sm"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">e.g., 'Abdullah' if NRIC shows 'John Abdullah'</p>
                            </div>

                            <!-- FOR IC HOLDERS: A/P (Ibu) / Mother's Name -->
                            <div id="ic-ap-section" class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-female text-pink-500 mr-2 text-base"></i>
                                    A/P (Mother's Name) <span class="text-gray-500 text-xs ml-1">(Optional)</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="mother_name_ap" id="motherNameAP" 
                                           class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-pink-500 focus:ring-4 focus:ring-pink-100 outline-none transition-all duration-300 text-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400"
                                           placeholder="Mother's name (for NRIC formatting)">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-pen text-sm"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">e.g., 'Fatima' if NRIC shows 'John A/P Fatima'</p>
                            </div>

                            <!-- FOR PASSPORT HOLDERS: Full Name as per Passport -->
                            <div id="passport-fullname-section" class="group md:col-span-2" style="display: none;">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-passport text-purple-500 mr-2 text-base"></i>
                                    Full Name (as per Passport) <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="passport_full_name" id="passportFullName" 
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400"
                                           placeholder="Enter full name exactly as shown in passport">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-pen text-sm"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">Please enter the full name exactly as it appears in your passport</p>
                            </div>
                            
                            <!-- Date of Birth -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-calendar-alt text-red-500 mr-2 text-base"></i>
                                    Date of Birth <span class="text-red-500 ml-1">*</span>
                                </label>
                                <x-date-picker name="date_of_birth" id="dateOfBirth" required max-date="{{ date('Y-m-d') }}" />
                                <p class="text-xs text-gray-500 mt-1" id="dobHint">IC number will be auto-filled from DOB (for IC type)</p>
                            </div>
                            
                            <!-- Identification Number -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-id-card text-red-500 mr-2 text-base"></i>
                                    ID Number <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" name="ic_number" id="icNumber" required 
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md font-mono text-gray-900 placeholder-gray-400"
                                           placeholder="YYMMDD + 6 digits (12 digits total)" maxlength="12">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-hashtag text-sm"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1" id="idNumberHint">First 6 digits auto-filled from DOB. Enter remaining 6 digits.</p>
                            </div>
                            
                            <!-- Occupation -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-briefcase text-red-500 mr-2 text-base"></i>
                                    Occupation
                                </label>
                                <div class="relative">
                                    <input type="text" name="occupation" 
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400"
                                           placeholder="Client's occupation">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-building text-sm"></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-3">
                                    <i class="fas fa-home text-red-500 mr-2 text-base"></i>
                                    Residential Address <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="bg-white p-5 rounded-xl border-2 border-gray-200">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <!-- Address Line 1 -->
                                        <div class="md:col-span-2">
                                            <input type="text" name="address_line_1" id="address_line_1" required
                                                   class="w-full px-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 text-base"
                                                   placeholder="Address Line 1 *">
                                        </div>
                                        <!-- Address Line 2 -->
                                        <div class="md:col-span-2">
                                            <input type="text" name="address_line_2" id="address_line_2"
                                                   class="w-full px-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 text-base"
                                                   placeholder="Address Line 2 (Optional)">
                                        </div>
                                        <!-- Country Dropdown -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-600 mb-1">Country</label>
                                            <div class="relative">
                                                <select name="country" id="country" required
                                                        class="w-full px-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 text-base bg-white appearance-none cursor-pointer">
                                                    <option value="">Select Country *</option>
                                                    <option value="Malaysia" selected>Malaysia</option>
                                                    <option value="Other">Other</option>
                                                </select>
                                                <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                            </div>
                                        </div>
                                        <!-- State Dropdown -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-600 mb-1">State</label>
                                            <div class="relative">
                                                <select name="state" id="state" required
                                                        class="w-full px-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 text-base bg-white appearance-none cursor-pointer">
                                                    <option value="">Select State *</option>
                                                </select>
                                                <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                            </div>
                                        </div>
                                        <!-- City Dropdown -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-600 mb-1">City</label>
                                            <div class="relative">
                                                <select name="city" id="city" required
                                                        class="w-full px-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 text-base bg-white appearance-none cursor-pointer">
                                                    <option value="">Select City *</option>
                                                </select>
                                                <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                            </div>
                                        </div>
                                        <!-- Postal Code -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-600 mb-1">Postal Code</label>
                                            <input type="text" name="postal_code" id="postal_code" required
                                                   class="w-full px-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 text-base"
                                                   placeholder="Postal/Pin Code *">
                                        </div>
                                    </div>
                                    <!-- Hidden merged address field -->
                                    <textarea name="address" id="merged_address" rows="2" required readonly
                                              class="w-full mt-4 px-4 py-3 border-2 border-gray-200 rounded-xl bg-gray-50 text-gray-600 text-sm resize-none"
                                              placeholder="Complete address will appear here..."></textarea>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Continue Button -->
                        <div class="mt-8 flex justify-end pt-4 border-t border-gray-100">
                            <button type="button" onclick="showTab('contact', true)" 
                                    class="bg-gradient-to-r from-green-600 to-green-800 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-300 flex items-center">
                                Continue to Contact
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div id="contact-content" class="tab-content hidden">
                    <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-teal-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-phone" style="color: white !important;"></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-6">
                            <!-- Email -->
                            <div class="md:col-span-2 group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-envelope text-teal-500 mr-2 text-base"></i>
                                    Email Address <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <input type="email" name="email" required 
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400"
                                           placeholder="email@domain.com">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-at text-sm"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Phone -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-mobile-alt text-teal-500 mr-2 text-base"></i>
                                    Phone Number <span class="text-red-500 ml-1">*</span>
                                </label>
                                <div class="relative">
                                    <input type="tel" name="phone" required 
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400"
                                           placeholder="Enter phone number">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-phone text-sm"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Alternative Phone -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-phone text-teal-500 mr-2 text-base"></i>
                                    Alternative Phone
                                </label>
                                <div class="relative">
                                    <input type="tel" name="alternative_phone" 
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400"
                                           placeholder="Alternative phone number">
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-phone text-sm"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Preferred Contact Method -->
                            <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-comment-dots text-teal-500 mr-2 text-base"></i>
                                    Preferred Contact
                                </label>
                                <div class="relative">
                                    <select name="preferred_contact" class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900">
                                        <option value="phone">Phone</option>
                                        <option value="email">Email</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 text-sm"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Account Type -->
                            <!-- <div class="group">
                                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-star text-teal-500 mr-2 text-base"></i>
                                    Account Type
                                </label>
                                <div class="relative">
                                    <select name="account_type"
                                            class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900">
                                        <option value="">Select account type</option>
                                        <option value="basic">Basic</option>
                                        <option value="premium">Premium</option>
                                        <option value="vip">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 text-sm"></i>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                        
                        <!-- Navigation Buttons -->
                        <div class="mt-8 flex items-center justify-between pt-4 border-t border-gray-100">
                            <button type="button" onclick="showTab('personal')" 
                                    class="px-6 py-3 border-2 border-gray-300 text-gray-600 rounded-xl font-semibold hover:bg-gray-50 transition-all duration-300 flex items-center">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Back to Personal
                            </button>
                            <button type="button" onclick="showTab('emergency', true)" 
                                    class="bg-gradient-to-r from-teal-600 to-green-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-300 flex items-center">
                                Continue to Emergency
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Emergency Contact Tab -->
                <div id="emergency-content" class="tab-content hidden">
                    <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 justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center mr-3">
                                    <i class="fas fa-exclamation-circle" style="color: white !important;"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-gray-900">Emergency Contacts</h3>
                                    <p class="text-sm text-gray-600">Add one or more emergency contacts</p>
                                </div>
                            </div>
                            <button type="button" onclick="addEmergencyContact()" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-xl flex items-center">
                                <i class="fas fa-plus mr-2"></i>Add Contact
                            </button>
                        </div>
                        
                        <!-- Emergency Contacts Container -->
                        <div id="emergency-contacts-container">
                            <!-- Contact 1 (Default) -->
                            <div class="emergency-contact-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200 mb-4">
                                <div class="flex justify-between items-center mb-4">
                                    <h4 class="font-semibold text-gray-700">Emergency Contact 1</h4>
                                    <button type="button" onclick="removeEmergencyContact(this)" class="text-red-500 hover:text-red-700">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- Contact Name -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                                            <i class="fas fa-user text-orange-500 mr-2 text-base"></i>
                                            Contact Name <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" name="emergency_contacts[0][name]" required placeholder="Full name"
                                               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 text-base">
                                    </div>
                                    
                                    <!-- Contact Phone -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                                            <i class="fas fa-phone text-orange-500 mr-2 text-base"></i>
                                            Contact Phone <span class="text-red-500">*</span>
                                        </label>
                                        <input type="tel" name="emergency_contacts[0][phone]" required placeholder="Phone number"
                                               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 text-base">
                                    </div>
                                    
                                    <!-- Relationship -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                                            <i class="fas fa-heart text-orange-500 mr-2 text-base"></i>
                                            Relationship <span class="text-red-500">*</span>
                                        </label>
                                        <select name="emergency_contacts[0][relationship]" required onchange="toggleRelationshipOther(0)"
                                                class="w-full pl-4 pr-10 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:ring-4 focus:ring-orange-100 outline-none appearance-none text-base">
                                            <option value="">-- Select Relationship --</option>
                                            <option value="Husband">Husband</option>
                                            <option value="Wife">Wife</option>
                                            <option value="Son">Son</option>
                                            <option value="Daughter">Daughter</option>
                                            <option value="Father">Father</option>
                                            <option value="Mother">Mother</option>
                                            <option value="Brother">Brother</option>
                                            <option value="Sister">Sister</option>
                                            <option value="Grandfather">Grandfather</option>
                                            <option value="Grandmother">Grandmother</option>
                                            <option value="Grandson">Grandson</option>
                                            <option value="Granddaughter">Granddaughter</option>
                                            <option value="Uncle">Uncle</option>
                                            <option value="Aunt">Aunt</option>
                                            <option value="Cousin">Cousin</option>
                                            <option value="Nephew">Nephew</option>
                                            <option value="Niece">Niece</option>
                                            <option value="Friend">Friend</option>
                                            <option value="Colleague">Colleague</option>
                                            <option value="Neighbor">Neighbor</option>
                                            <option value="Others">Others (Please specify)</option>
                                        </select>
                                    </div>
                                    
                                    <!-- Contact Email -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                                            <i class="fas fa-envelope text-orange-500 mr-2 text-base"></i>
                                            Contact Email
                                        </label>
                                        <input type="email" name="emergency_contacts[0][email]" placeholder="Email address"
                                               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 text-base">
                                    </div>
                                    
                                    <!-- Relationship Other (Conditional) -->
                                    <div class="group md:col-span-2" id="relationship_other_0" style="display: none;">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                                            <i class="fas fa-pen text-orange-500 mr-2 text-base"></i>
                                            Please Specify Relationship
                                        </label>
                                        <textarea name="emergency_contacts[0][relationship_other]" placeholder="Describe the relationship" rows="2"
                                                  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 text-base"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Navigation Buttons -->
                        <div class="mt-8 flex items-center justify-between pt-4 border-t border-gray-100">
                            <button type="button" onclick="showTab('contact')" 
                                    class="px-6 py-3 border-2 border-gray-300 text-gray-600 rounded-xl font-semibold hover:bg-gray-50 transition-all duration-300 flex items-center">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Back to Contact
                            </button>
                            <button type="button" onclick="showTab('account', true)" 
                                    class="bg-gradient-to-r from-orange-600 to-red-500 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-300 flex items-center">
                                Continue to Account
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Account Tab -->
                <div id="account-content" class="tab-content hidden">
                    <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-green-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-lock" style="color: white !important;"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Account Settings</h3>
                                <p class="text-sm text-gray-600">Set up client account credentials</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Password (Auto-filled with IC) -->
                            <div class="md:col-span-2">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Password <span class="text-red-500">*</span></label>
                                <div class="relative">
                                    <input type="password" name="password" id="password" required minlength="8"
                                           class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white text-gray-900"
                                           placeholder="Auto-filled with IC number" readonly>
                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                        <i class="fas fa-lock text-sm"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">Password will be auto-filled with IC number</p>
                            </div>
                            
                            <!-- Marital Status -->
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Marital Status <span class="text-red-500">*</span></label>
                                <select name="marital_status" id="marital_status" required 
                                        class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                    <option value="">Select status</option>
                                    <option value="single">Single</option>
                                    <option value="married">Married</option>
                                    <option value="divorced">Divorced</option>
                                    <option value="widowed">Widowed</option>
                                </select>
                            </div>
                            
                            <!-- Religion -->
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Religion</label>
                                <select name="religion" 
                                        class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                    <option value="">Select religion</option>
                                    <option value="islam">Islam</option>
                                    <option value="christianity">Christianity</option>
                                    <option value="hinduism">Hindu</option>
                                    <option value="buddhism">Buddhism</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            
                            <!-- Spouse Name (conditional - only married) -->
                            <div id="spouse_name_container" class="hidden">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Spouse Name</label>
                                <input type="text" name="spouse_name" 
                                       class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                            </div>
                            
                            <!-- Spouse IC (conditional - only married) -->
                            <div id="spouse_ic_container" class="hidden">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Spouse IC Number <span class="text-red-500">*</span> <span class="text-xs text-gray-500">(12 digits)</span></label>
                                <input type="text" name="spouse_ic_number" 
                                       class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                            </div>
                            
                            <!-- Number of Spouses (only for married) -->
                            <div id="spouse_count_container" class="hidden">
                                <label class="block text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-users text-green-600 mr-2"></i>Number of Spouses
                                </label>
                                <input type="number" name="spouse_count" id="spouse_count" min="1" max="10" value="1"
                                       class="w-32 px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none"
                                       onchange="generateFamilyMembers()">
                                <p class="text-xs text-gray-500 mt-1">Enter number of spouses (1-10)</p>
                            </div>
                            
                            <!-- Number of Children (for married/divorced/widowed) -->
                            <div id="children_count_container" class="hidden">
                                <label class="block text-sm font-semibold text-gray-700 mb-3">
                                    <i class="fas fa-child text-green-600 mr-2"></i>Number of Children
                                </label>
                                <input type="number" name="children_count" id="children_count" min="0" max="20" value="0"
                                       class="w-32 px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none"
                                       onchange="generateFamilyMembers()">
                                <p class="text-xs text-gray-500 mt-1">Enter number of children (0-20)</p>
                            </div>
                            
                            <!-- Will Type Preference -->
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Will Type / Package</label>
                                <select name="will_type_preference" id="will_type_preference"
                                        onchange="handleWillTypeChange()"
                                        class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                    <option value="">Select Package</option>
                                    @foreach($packages as $package)
                                        <option value="{{ $package->type }}">{{ $package->name }} ({{ $package->type }}) - RM{{ number_format($package->price, 2) }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Joint Will Fields (hidden by default) -->
                            <div id="joint-will-fields" class="hidden md:col-span-2">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                    <!-- Joint Person Name -->
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-700 mb-2">Joint Person Name</label>
                                        <input type="text" name="joint_person_name" 
                                               class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                    </div>
                                    <!-- Joint Person IC Number -->
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-700 mb-2">Joint Person IC Number <span class="text-red-500">*</span> <span class="text-xs text-gray-500">(12 digits)</span></label>
                                        <input type="text" name="joint_person_ic_number" 
                                               class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                    </div>
                                    <!-- Joint Person Address -->
                                    <div class="md:col-span-2">
                                        <div class="flex items-center justify-between mb-2">
                                            <label class="block text-sm font-semibold text-gray-700">Joint Person Address</label>
                                            <button type="button" onclick="copyClientAddressToJoint()" class="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-3 py-1 rounded-lg transition">
                                                <i class="fas fa-copy mr-1"></i>Copy from Personal
                                            </button>
                                        </div>
                                        <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200 joint-address-container">
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                                <div class="md:col-span-2">
                                                    <input type="text" name="joint_person_address_line_1" placeholder="Address Line 1 *"
                                                           class="joint-addr-1 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-100 outline-none transition-all bg-white">
                                                </div>
                                                <div class="md:col-span-2">
                                                    <input type="text" name="joint_person_address_line_2" placeholder="Address Line 2 (Optional)"
                                                           class="joint-addr-2 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-100 outline-none transition-all bg-white">
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-600 mb-1">Country</label>
                                                    <div class="relative">
                                                        <select name="joint_person_country" id="joint_country" onchange="handleJointCountryChange()"
                                                                class="joint-country w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-100 outline-none transition-all bg-white appearance-none cursor-pointer">
                                                            <option value="Malaysia">Malaysia</option>
                                                            <option value="Other">Other</option>
                                                        </select>
                                                        <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-600 mb-1">State</label>
                                                    <div class="relative">
                                                        <select name="joint_person_state" id="joint_state" onchange="handleJointStateChange()"
                                                                class="joint-state w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-100 outline-none transition-all bg-white appearance-none cursor-pointer">
                                                            <option value="">Select State</option>
                                                        </select>
                                                        <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-600 mb-1">City</label>
                                                    <div class="relative">
                                                        <select name="joint_person_city" id="joint_city"
                                                                class="joint-city w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-100 outline-none transition-all bg-white appearance-none cursor-pointer">
                                                            <option value="">Select City</option>
                                                        </select>
                                                        <i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-600 mb-1">Postal Code</label>
                                                    <input type="text" name="joint_person_postal_code" placeholder="Postal Code *"
                                                           class="joint-postal w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-100 outline-none transition-all bg-white">
                                                </div>
                                            </div>
                                            <textarea name="joint_person_address" rows="2" readonly
                                                      class="joint-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..."></textarea>
                                        </div>
                                    </div>
                                    <!-- Joint Person Marital Status -->
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-700 mb-2">Joint Person Marital Status</label>
                                        <select name="joint_person_marital_status" onchange="handleJointMaritalStatusChange()"
                                                class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                            <option value="">Select status</option>
                                            <option value="single">Single</option>
                                            <option value="married">Married</option>
                                            <option value="divorced">Divorced</option>
                                            <option value="widowed">Widowed</option>
                                        </select>
                                    </div>
                                    <!-- Joint Person Email -->
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-700 mb-2">Joint Person Email</label>
                                        <input type="email" name="joint_person_email" 
                                               class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                    </div>
                                    <!-- Joint Person Phone -->
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-700 mb-2">Joint Person Phone</label>
                                        <input type="tel" name="joint_person_phone" 
                                               class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                    </div>
                                </div>

                                <!-- Joint Spouse Fields (shown when married) -->
                                <div id="joint-spouse-fields" class="hidden mt-6 pt-6 border-t-2 border-gray-200">
                                    <h4 class="text-sm font-semibold text-gray-700 mb-4">Spouse Details</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                        <!-- Spouse Name -->
                                        <div>
                                            <label class="block text-sm font-semibold text-gray-700 mb-2">Spouse Name</label>
                                            <input type="text" name="joint_spouse_name" 
                                                   class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                        </div>
                                        <!-- Spouse IC Number -->
                                        <div>
                                            <label class="block text-sm font-semibold text-gray-700 mb-2">Spouse IC Number <span class="text-red-500">*</span> <span class="text-xs text-gray-500">(12 digits)</span></label>
                                            <input type="text" name="joint_spouse_ic_number" 
                                                   class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                        </div>
                                        <!-- Spouse Salary -->
                                        <div>
                                            <label class="block text-sm font-semibold text-gray-700 mb-2">Spouse Salary</label>
                                            <input type="number" name="joint_spouse_salary" step="0.01" 
                                                   class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all">
                                        </div>
                                        <!-- What to Give to Spouse -->
                                        <div class="md:col-span-2">
                                            <label class="block text-sm font-semibold text-gray-700 mb-2">What to Give to Spouse</label>
                                            <textarea name="joint_spouse_give" rows="2" 
                                                      class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none transition-all resize-none"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Navigation Buttons -->
                        <div class="mt-8 flex items-center justify-between pt-4 border-t border-gray-100">
                            <button type="button" onclick="showTab('emergency')" 
                                    class="px-6 py-3 border-2 border-gray-300 text-gray-600 rounded-xl font-semibold hover:bg-gray-50 transition-all duration-300 flex items-center">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Back
                            </button>
                            <button type="button" onclick="showTab('family', true)" 
                                    class="bg-gradient-to-r from-green-600 to-teal-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-green-700 transition-all flex items-center">
                                Continue to Family<i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Family Tab -->
                <div id="family-content" class="tab-content hidden">
                    <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-purple-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-users" style="color: white !important;"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Family Members</h3>
                                <p class="text-sm text-gray-600">Add spouse, children, parents (optional)</p>
                            </div>
                        </div>
                        
                        <!-- Debug buttons for family generation testing -->
                        <!-- <div class="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-xl">
                            <p class="text-sm font-semibold text-yellow-800 mb-3">🔧 Debug Tools (Family Generation)</p>
                            <div class="flex gap-2 flex-wrap">
                                <button type="button" onclick="logInputValues()" class="px-3 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-all">
                                    📊 Log Input Values
                                </button>
                                <button type="button" onclick="testFamilyGeneration()" class="px-3 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600 transition-all">
                                    🚀 Force Generate Forms
                                </button>
                                <button type="button" onclick="generateTestFamilyMembers()" class="px-3 py-2 bg-orange-500 text-white rounded-lg text-sm hover:bg-orange-600 transition-all">
                                    🧪 Generate Test Forms
                                </button>
                            </div>
                            <p class="text-xs text-yellow-600 mt-2">Use these buttons to test family form generation. Check browser console for output.</p>
                        </div> -->
                        
                        <div id="family-members-container" class="space-y-6">
                            <!-- Family members auto-generated here -->
                        </div>
                        
                        <button type="button" onclick="addFamilyMember()" class="mt-4 w-full py-3 border-2 border-dashed border-purple-300 rounded-xl text-purple-600 hover:bg-purple-50 transition-all">
                            <i class="fas fa-plus mr-2"></i>Add Another Family Member
                        </button>
                        
                        <!-- Navigation Buttons -->
                        <div class="mt-8 flex items-center justify-between pt-4 border-t border-gray-100">
                            <button type="button" onclick="showTab('account')" 
                                    class="px-6 py-3 border-2 border-gray-300 text-gray-600 rounded-xl font-semibold hover:bg-gray-50 transition-all duration-300 flex items-center">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Back
                            </button>
                            <button type="button" onclick="showTab('assets', true)" 
                                    class="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-purple-700 transition-all flex items-center">
                                Continue to Assets<i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Assets Tab -->
                <div id="assets-content" class="tab-content hidden">
                    <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-blue-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-home" style="color: white !important;"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Assets</h3>
                                <p class="text-sm text-gray-600">Properties, vehicles, bank accounts (optional)</p>
                            </div>
                        </div>
                        
                        <div id="assets-container" class="space-y-4">
                            <div class="asset-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200">
                                <div class="flex justify-between items-center mb-4">
                                    <h4 class="font-semibold text-gray-700">Asset 1</h4>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <!-- Main Category -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-folder text-blue-600 mr-2 text-base"></i>
                                            Category (Main) <span class="text-red-500 ml-1">*</span>
                                        </label>
                                        <div class="relative">
                                            <select name="assets[0][main_category]" id="main_category_0" onchange="updateSubCategory(this, 0)"
                                                    class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900">
                                                <option value="">Select Main Category</option>
                                                <option value="non_movable_assets">Non-Movable Assets (Immovable)</option>
                                                <option value="movable_assets">Movable Assets</option>
                                                <option value="car_and_automobiles">Car and Automobiles</option>
                                                <option value="monies_and_accounts">Monies and Accounts</option>
                                                <option value="digital_assets">Digital Assets</option>
                                                <option value="personal_assets">Personal Assets</option>
                                                <option value="other_assets">Other Assets</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 text-sm"></i>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Asset Sub Category -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-home text-blue-600 mr-2 text-base"></i>
                                            Asset Type <span class="text-red-500 ml-1">*</span>
                                        </label>
                                        <div class="relative">
                                            <select name="assets[0][type]" id="sub_category_0"
                                                    onchange="updateAssetDropdowns()"
                                                    class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900">
                                                <option value="">Select Main Category 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 text-sm"></i>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Ownership Type -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-users text-blue-600 mr-2 text-base"></i>
                                            Ownership Type
                                        </label>
                                        <div class="relative">
                                            <select name="assets[0][ownership_type]" onchange="toggleCoOwners(this, 0)"
                                                    class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900">
                                                <option value="single">Sole Ownership</option>
                                                <option value="joint">Joint Ownership</option>
                                                <option value="tenancy_in_common">Tenancy in Common</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 text-sm"></i>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Description -->
                                    <div class="md:col-span-2 group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-file-alt text-blue-600 mr-2 text-base"></i>
                                            Asset Description
                                        </label>
                                        <div class="relative">
                                            <input type="text" name="assets[0][description]" 
                                                   oninput="updateAssetDropdowns()"
                                                   placeholder="e.g., 3-bedroom house in KL, Proton X70, Maybank Savings Account"
                                                   class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                                <i class="fas fa-pen text-sm"></i>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Location/Address -->
                                    <div class="md:col-span-2 group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-map-marker-alt text-blue-600 mr-2 text-base"></i>
                                            Location / Address
                                        </label>
                                        <div class="relative">
                                            <input type="text" name="assets[0][location]" 
                                                   oninput="updateAssetDropdowns()"
                                                   placeholder="e.g., No. 123, Jalan Tun Razak, 50400 Kuala Lumpur"
                                                   class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                                                <i class="fas fa-map text-sm"></i>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Acquisition Year -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-calendar-alt text-blue-600 mr-2 text-base"></i>
                                            Year Acquired
                                        </label>
                                        <input type="number" name="assets[0][acquisition_year]" 
                                               placeholder="e.g., 2020" min="1950" max="2099"
                                               class="w-full pl-4 pr-4 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900">
                                    </div>
                                    
                                    <!-- Ownership Percentage -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-percentage text-blue-600 mr-2 text-base"></i>
                                            Your Ownership %
                                        </label>
                                        <input type="number" name="assets[0][ownership_percentage]" min="0" max="100" step="1"
                                               class="w-full pl-4 pr-4 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900">
                                        <p class="text-xs text-gray-500 mt-1">For sole ownership, this will automatically be set to 100%</p>
                                    </div>
                                    
                                    <!-- Co-owners Section (Hidden by default) -->
                                    <div id="co-owners-section-0" class="md:col-span-2 hidden">
                                        <div class="bg-green-50 rounded-xl p-4 border-2 border-green-200">
                                            <label class="block text-sm font-semibold text-gray-700 mb-3">
                                                <i class="fas fa-users text-green-600 mr-2"></i>Number of Co-owners
                                            </label>
                                            <div class="flex items-center gap-3 mb-4">
                                                <input type="number" id="co-owners-count-0" min="1" max="10" value="1" 
                                                       class="w-24 px-3 py-2 border border-gray-300 rounded-lg focus:border-green-500 outline-none"
                                                       onchange="generateCoOwnerRows(0)">
                                                <button type="button" onclick="generateCoOwnerRows(0)" 
                                                        class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all text-sm">
                                                    <i class="fas fa-sync-alt mr-1"></i>Update Rows
                                                </button>
                                            </div>
                                            <p class="text-xs text-gray-500 mb-4">Enter the number of joint owners (excluding yourself)</p>
                                            
                                            <!-- Co-owners Container -->
                                            <div id="co-owners-rows-0" class="space-y-3">
                                                <!-- Dynamic rows will be generated here -->
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Hereditary Asset -->
                                    <!-- <div class="flex items-center">
                                        <input type="checkbox" name="assets[0][is_hereditary]" id="is_hereditary_0" value="1" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <label for="is_hereditary_0" class="ml-2 text-sm font-medium text-gray-600">Hereditary Asset </label>
                                    </div> -->
                                    
                                    <!-- Has Collateral -->
                                    <!-- <div class="flex items-center">
                                        <input type="checkbox" name="assets[0][has_collateral]" id="has_collateral_0" value="1" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" onchange="toggleCollateral(this, 0)">
                                        <label for="has_collateral_0" class="ml-2 text-sm font-medium text-gray-600">Used as Collateral (Vangunan)</label>
                                    </div> -->
                                    
                                    <!-- Has Liability for this Asset -->
                                    <!-- <div class="flex items-center">
                                        <input type="checkbox" name="assets[0][has_liability]" id="has_liability_0" value="1" class="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500" onchange="toggleAssetLiability(this, 0)">
                                        <label for="has_liability_0" class="ml-2 text-sm font-medium text-gray-600">Has Liability (Loan) for this Asset?</label>
                                    </div> -->
                                    
                                    <!-- Asset Liability Details (Hidden by default) -->
                                    <!-- <div id="asset-liability-details-0" class="md:col-span-2 hidden">
                                        <div class="bg-red-50 rounded-xl p-4 border-2 border-red-200">
                                            <h5 class="font-semibold text-red-700 mb-3"><i class="fas fa-credit-card mr-2"></i>Liability Details</h5>
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                <div class="group">
                                                    <label class="block text-sm font-semibold text-gray-700 mb-2">Liability Type</label>
                                                    <select name="assets[0][liability_type]" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-red-500 outline-none bg-white">
                                                        <option value="">Select type</option>
                                                        <option value="housing_loan">Housing Loan / Mortgage</option>
                                                        <option value="personal_loan">Personal Loan</option>
                                                        <option value="car_loan">Car Loan</option>
                                                        <option value="business_loan">Business Loan</option>
                                                        <option value="other">Other</option>
                                                    </select>
                                                </div>
                                                <div class="group">
                                                    <label class="block text-sm font-semibold text-gray-700 mb-2">Amount Owed (RM)</label>
                                                    <input type="number" name="assets[0][liability_amount]" step="0.01" placeholder="e.g., 350000" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-red-500 outline-none bg-white">
                                                </div>
                                                <div class="md:col-span-2 group">
                                                    <label class="block text-sm font-semibold text-gray-700 mb-2">Creditor/Bank</label>
                                                    <input type="text" name="assets[0][liability_creditor]" placeholder="e.g., Maybank, CIMB" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-red-500 outline-none bg-white">
                                                </div>
                                            </div>
                                        </div>
                                    </div> -->
                                    
                                    <!-- Collateral Details (Hidden by default) -->
                                    <div id="collateral-details-0" class="md:col-span-2 hidden">
                                        <label class="block text-sm font-medium text-gray-600 mb-1">Collateral Details</label>
                                        <input type="text" name="assets[0][collateral_details]" placeholder="e.g., Pledged for housing loan with Maybank" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 outline-none">
                                    </div>
                                    
                                    <!-- Current Value -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-dollar-sign text-blue-600 mr-2 text-base"></i>
                                            Current Value (RM)
                                        </label>
                                        <input type="number" name="assets[0][value]" step="0.01" placeholder="e.g., 500000"
                                               oninput="updateAssetDropdowns()"
                                               class="w-full pl-4 pr-4 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                    </div>
                                    
                                    <!-- Market Value -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-chart-line text-blue-600 mr-2 text-base"></i>
                                            Market Value (RM)
                                        </label>
                                        <input type="number" name="assets[0][market_value]" step="0.01" placeholder="e.g., 650000"
                                               class="w-full pl-4 pr-4 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                    </div>
                                    
                                    <!-- Monthly Income -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-chart-line text-green-600 mr-2 text-base"></i>
                                            Monthly Income (RM)
                                        </label>
                                        <input type="number" name="assets[0][monthly_income]" step="0.01" placeholder="0.00"
                                               class="w-full pl-4 pr-4 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                        <div class="text-xs text-gray-500 mt-1">Enter the actual monthly income this asset generates</div>
                                    </div>
                                    
                                    <!-- Income Type -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-tag text-green-600 mr-2 text-base"></i>
                                            Income Source Type
                                        </label>
                                        <select name="assets[0][income_type]" 
                                                class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 outline-none appearance-none transition-all duration-300 text-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900">
                                            <option value="">Select Income Type</option>
                                            <option value="rent">Rental Income</option>
                                            <option value="interest">Interest/Dividends</option>
                                            <option value="business">Business Income</option>
                                            <option value="farm">Agricultural Income</option>
                                            <option value="other">Other Income</option>
                                        </select>
                                    </div>
                                    
                                    <!-- Income Description -->
                                    <div class="md:col-span-2 group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-sticky-note text-green-600 mr-2 text-base"></i>
                                            Income Description
                                        </label>
                                        <input type="text" name="assets[0][income_description]" 
                                               placeholder="Describe the income source"
                                               class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                    </div>
                                    
                                    <!-- Notes -->
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-600 mb-1">Additional Notes</label>
                                        <textarea name="assets[0][notes]" rows="3" placeholder="Any other details relevant for will preparation..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 outline-none resize-none"></textarea>
                                    </div>
                                </div>
                                
                                <!-- Per-Asset Ownership Validation -->
                                <div class="md:col-span-2 mt-4">
                                    <div id="ownership-warning-0" class="hidden rounded-xl border-2 p-4">
                                        <div class="flex items-start">
                                            <i class="fas fa-exclamation-triangle text-xl mr-3 mt-1"></i>
                                            <div>
                                                <h4 class="font-semibold" id="ownership-warning-title-0">Warning</h4>
                                                <p class="text-sm mt-1" id="ownership-warning-message-0"></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 p-3 bg-gray-50 rounded-xl border border-gray-200 flex items-center justify-between">
                                        <span class="text-sm font-medium text-gray-700">Asset 1 Total Ownership:</span>
                                        <span id="total-ownership-0" class="text-lg font-bold text-gray-900">100%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <button type="button" onclick="addAsset()" class="mt-4 w-full py-3 border-2 border-dashed border-blue-300 rounded-xl text-blue-600 hover:bg-blue-50 transition-all">
                            <i class="fas fa-plus mr-2"></i>Add Another Asset
                        </button>
                        
                        <!-- Navigation Buttons -->
                        <div class="mt-8 flex items-center justify-between pt-4 border-t border-gray-100">
                            <button type="button" onclick="showTab('family')" 
                                    class="px-6 py-3 border-2 border-gray-300 text-gray-600 rounded-xl font-semibold hover:bg-gray-50 transition-all duration-300 flex items-center">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Back
                            </button>
                            <button type="button" onclick="showTab('liabilities', true)" 
                                    class="bg-gradient-to-r from-blue-600 to-cyan-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-700 transition-all flex items-center">
                                Continue to Debts<i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Liabilities Tab -->
                <div id="liabilities-content" class="tab-content hidden">
                    <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-credit-card" style="color: white !important;"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Debts & Liabilities</h3>
                                <p class="text-sm text-gray-600">Loans, mortgages, credit cards (optional)</p>
                            </div>
                        </div>
                        
                        <div id="liabilities-container" class="space-y-4">
                            <div class="liability-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200">
                                <div class="flex justify-between items-center mb-4">
                                    <h4 class="font-semibold text-gray-700">Liability 1</h4>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-file-invoice text-red-600 mr-2 text-base"></i>
                                            Liability Type
                                        </label>
                                        <div class="relative">
                                            <select name="liabilities[0][type]" class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900">
                                                <option value="">Select type</option>
                                                <option value="housing_loan">Housing Loan / Mortgage</option>
                                                <option value="personal_loan">Personal Loan</option>
                                                <option value="car_loan">Car Loan</option>
                                                <option value="business_loan">Business Loan</option>
                                                <option value="credit_card">Credit Card Debt</option>
                                                <option value="other">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 text-sm"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Creditor/Bank -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-university text-red-600 mr-2 text-base"></i>
                                            Creditor/Bank
                                        </label>
                                        <input type="text" name="liabilities[0][creditor]" placeholder="e.g., Maybank, CIMB" class="w-full pl-4 pr-4 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                    </div>
                                    
                                    <!-- Linked Asset (Optional) -->
                                    <div class="md:col-span-2 group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-link text-red-600 mr-2 text-base"></i>
                                            Linked Asset (Optional)
                                        </label>
                                        <div class="relative">
                                            <select name="liabilities[0][linked_asset_index]" 
                                                    class="w-full pl-4 pr-10 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900 liability-asset-select"
                                                    onchange="updateAssetLiabilityLink(this, 0)">
                                                <option value="">-- Select an asset this loan is for --</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 text-sm"></i>
                                            </div>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-2">If this loan/mortgage is tied to a specific asset (e.g., housing loan for a property), select it here</p>
                                    </div>
                                    <!-- Hidden field to store asset ID reference -->
                                    <input type="hidden" name="liabilities[0][asset_reference]" id="liability-asset-ref-0">
                                    
                                    <!-- Amount Owed -->
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-dollar-sign text-red-600 mr-2 text-base"></i>
                                            Amount Owed (RM)
                                        </label>
                                        <input type="number" name="liabilities[0][amount]" step="0.01" placeholder="e.g., 350000" class="w-full pl-4 pr-4 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                    </div>
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-calendar-alt text-red-600 mr-2 text-base"></i>
                                            Monthly Payment (RM)
                                        </label>
                                        <input type="number" name="liabilities[0][monthly_payment]" step="0.01" placeholder="e.g., 2500" class="w-full pl-4 pr-4 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                    </div>
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-balance-scale text-red-600 mr-2 text-base"></i>
                                            Outstanding Balance (RM)
                                        </label>
                                        <input type="number" name="liabilities[0][outstanding_balance]" step="0.01" placeholder="e.g., 320000" class="w-full pl-4 pr-4 py-4 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-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 placeholder-gray-400">
                                    </div>
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-clock text-red-600 mr-2 text-base"></i>
                                            Due Date
                                        </label>
                                        <x-date-picker name="liabilities[0][due_date]" />
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-600 mb-1">Description</label>
                                        <textarea name="liabilities[0][description]" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-red-500 outline-none resize-none"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <button type="button" onclick="addLiability()" class="mt-4 w-full py-3 border-2 border-dashed border-red-300 rounded-xl text-red-600 hover:bg-red-50 transition-all">
                            <i class="fas fa-plus mr-2"></i>Add Another Liability
                        </button>
                        
                        <!-- Navigation Buttons -->
                        <div class="mt-8 flex items-center justify-between pt-4 border-t border-gray-100">
                            <button type="button" onclick="showTab('assets')" 
                                    class="px-6 py-3 border-2 border-gray-300 text-gray-600 rounded-xl font-semibold hover:bg-gray-50 transition-all duration-300 flex items-center">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Back
                            </button>
                            <div class="flex items-center gap-3">
                                <button type="button" onclick="showTab('kyc', true)"
                                        class="px-6 py-3 border-2 border-gray-300 text-gray-600 rounded-xl font-semibold hover:bg-gray-50 transition-all duration-300 flex items-center">
                                    <i class="fas fa-arrow-right mr-2"></i>
                                    Skip to KYC
                                </button>
                                <button type="button" onclick="showTab('kyc', true)"
                                        class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-indigo-700 transition-all flex items-center">
                                    Continue to KYC<i class="fas fa-arrow-right ml-2"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- KYC Documents Tab -->
                <div id="kyc-content" class="tab-content hidden">
                    <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-indigo-100 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-file-upload" style="color: white !important;"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">KYC Documents</h3>
                                <p class="text-sm text-gray-600">Upload identity and address proof documents</p>
                            </div>
                        </div>
                        
                        <div id="kyc-documents-container" class="space-y-4">
                            <div class="kyc-document-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200">
                                <div class="flex justify-between items-center mb-4">
                                    <h4 class="font-semibold text-gray-700">Document 1</h4>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-file-alt text-indigo-600 mr-2 text-base"></i>
                                            Document Type <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <select name="kyc_documents[0][type]" onchange="toggleKycOtherDescription(0)" class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100 outline-none transition-all duration-300 text-base bg-gray-50 hover:bg-white group-hover:shadow-md appearance-none text-gray-900">
                                                <option value="">Select document type</option>
                                                <option value="ic_front">IC / Passport (Front)</option>
                                                <option value="ic_back">IC / Passport (Back)</option>
                                                <option value="driving_license">Driving License</option>
                                                <option value="utility_bill">Utility Bill</option>
                                                <option value="bank_statement">Bank Statement</option>
                                                <option value="other">Other - Asset Type</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 text-sm"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Conditional field for "Other - Asset Type" -->
                                    <div class="group" id="kyc_other_description_0" style="display: none;">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-pen text-indigo-600 mr-2 text-base"></i>
                                            Please Specify Document Type
                                        </label>
                                        <textarea name="kyc_documents[0][other_description]" placeholder="Describe the type of document (e.g., Insurance Certificate, Investment Report, etc.)" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100 outline-none transition-all duration-300 text-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900 resize-none" rows="2"></textarea>
                                    </div>
                                    <div class="group">
                                        <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                                            <i class="fas fa-upload text-indigo-600 mr-2 text-base"></i>
                                            Upload File <span class="text-red-500">*</span>
                                        </label>
                                        <input type="file" name="kyc_documents[0][file]" accept=".pdf,.jpg,.jpeg,.png" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100 outline-none transition-all duration-300 text-base bg-gray-50 hover:bg-white group-hover:shadow-md text-gray-900">
                                        <p class="text-xs text-gray-500 mt-1">Accepted: PDF, JPG, PNG (Max 10MB)</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <button type="button" onclick="addKycDocument()" class="mt-4 w-full py-3 border-2 border-dashed border-indigo-300 rounded-xl text-indigo-600 hover:bg-indigo-50 transition-all">
                            <i class="fas fa-plus mr-2"></i>Add Another Document
                        </button>
                        
                        <!-- Navigation Buttons -->
                        <div class="mt-8 flex items-center justify-between pt-4 border-t border-gray-100">
                            <button type="button" onclick="showTab('liabilities')" 
                                    class="px-6 py-3 border-2 border-gray-300 text-gray-600 rounded-xl font-semibold hover:bg-gray-50 transition-all duration-300 flex items-center">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Back
                            </button>
                            <button type="submit" 
                                    class="bg-gradient-to-r from-red-600 to-red-800 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-300 flex items-center">
                                <i class="fas fa-check mr-2"></i>
                                Create Client
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

<script>
    // Malaysian states and cities data - only define if not already defined
    if (typeof malaysiaStates === 'undefined') {
        var malaysiaStates = {
        'Johor': ['Johor Bahru', 'Batu Pahat', 'Muar', 'Kluang', 'Segamat', 'Kulai', 'Pasir Gudang', 'Skudai'],
        'Kedah': ['Alor Setar', 'Sungai Petani', 'Kulim', 'Langkawi', 'Jitra', 'Gurun', 'Yan'],
        'Kelantan': ['Kota Bharu', 'Pasir Mas', 'Tumpat', 'Kuala Krai', 'Gua Musang', 'Tanah Merah'],
        'Kuala Lumpur': ['Kuala Lumpur', 'Bukit Bintang', 'Cheras', 'Ampang', 'Petaling Jaya', 'Damansara'],
        'Labuan': ['Labuan', 'Victoria'],
        'Melaka': ['Melaka City', 'Alor Gajah', 'Jasin', 'Simpang Ampat', 'Bukit Beruang'],
        'Negeri Sembilan': ['Seremban', 'Port Dickson', 'Nilai', 'Kajang', 'Bahau', 'Tampin'],
        'Pahang': ['Kuantan', 'Temerloh', 'Bentong', 'Jerantut', 'Raub', 'Lipis'],
        'Penang': ['George Town', 'Bayan Lepas', 'Butterworth', 'Bukit Mertajam', 'Nibong Tebal', 'Seberang Perai'],
        'Perak': ['Ipoh', 'Taiping', 'Kuala Kangsar', 'Teluk Intan', 'Sitiawan', 'Lumut'],
        'Perlis': ['Kangar', 'Arau', 'Kuala Perlis'],
        'Putrajaya': ['Putrajaya', 'Precinct 1', 'Precinct 2', 'Precinct 3'],
        'Sabah': ['Kota Kinabalu', 'Sandakan', 'Tawau', 'Lahad Datu', 'Keningau', 'Ranau'],
        'Sarawak': ['Kuching', 'Miri', 'Sibu', 'Bintulu', 'Sri Aman', 'Kapit'],
        'Selangor': ['Shah Alam', 'Petaling Jaya', 'Subang Jaya', 'Klang', 'Ampang', 'Kajang', 'Bangi', 'Selayang'],
        'Terengganu': ['Kuala Terengganu', 'Kemaman', 'Dungun', 'Marang', 'Besut', 'Setiu']
    };
    }

    // Setup country/state/city dropdowns
    function setupCountryStateCityDropdowns() {
        const countrySelect = document.getElementById('country');
        const stateSelect = document.getElementById('state');
        const citySelect = document.getElementById('city');

        if (!countrySelect || !stateSelect || !citySelect) return;

        // Handle country change
        countrySelect.addEventListener('change', function() {
            const selectedCountry = this.value;
            
            // Clear state and city dropdowns
            stateSelect.innerHTML = '<option value="">Select State *</option>';
            citySelect.innerHTML = '<option value="">Select City *</option>';

            if (selectedCountry === 'Malaysia') {
                // Populate Malaysian states
                Object.keys(malaysiaStates).forEach(state => {
                    const option = document.createElement('option');
                    option.value = state;
                    option.textContent = state;
                    stateSelect.appendChild(option);
                });
            } else if (selectedCountry) {
                // For other countries, add a generic option
                const option = document.createElement('option');
                option.value = 'Other';
                option.textContent = 'Other State/Province';
                stateSelect.appendChild(option);
            }

            // Trigger address merge
            mergeClientAddress();
        });

        // Handle state change
        stateSelect.addEventListener('change', function() {
            const selectedState = this.value;
            const selectedCountry = countrySelect.value;
            
            // Clear city dropdown
            citySelect.innerHTML = '<option value="">Select City *</option>';

            if (selectedCountry === 'Malaysia' && selectedState && malaysiaStates[selectedState]) {
                // Populate cities for selected Malaysian state
                malaysiaStates[selectedState].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            } else if (selectedState) {
                // For other countries, add a generic option
                const option = document.createElement('option');
                option.value = 'Other';
                option.textContent = 'Other City';
                citySelect.appendChild(option);
            }

            // Trigger address merge
            mergeClientAddress();
        });

        // Handle city change
        citySelect.addEventListener('change', function() {
            // Trigger address merge
            mergeClientAddress();
        });

        // Initialize with Malaysia selected
        if (countrySelect.value === 'Malaysia') {
            countrySelect.dispatchEvent(new Event('change'));
        }
    }

    let currentStep = 0;
    // Debug functions for testing
    function testFamilyGeneration() {
        console.log('=== MANUAL FAMILY GENERATION TEST ===');
        generateFamilyMembers();
    }
    
    function logInputValues() {
        console.log('=== CURRENT INPUT VALUES ===');
        const spouseCountInput = document.querySelector('input[name="spouse_count"]');
        const childCountInput = document.querySelector('input[name="children_count"]');
        const maritalStatusSelect = document.querySelector('select[name="marital_status"]');
        
        console.log('Marital Status Element:', maritalStatusSelect);
        console.log('Marital Status Value:', maritalStatusSelect?.value);
        console.log('Spouse Count Element:', spouseCountInput);
        console.log('Spouse Count Value:', spouseCountInput?.value);
        console.log('Spouse Count Visible:', spouseCountInput ? window.getComputedStyle(spouseCountInput.parentElement).display : 'N/A');
        console.log('Children Count Element:', childCountInput);
        console.log('Children Count Value:', childCountInput?.value);
        console.log('Children Count Visible:', childCountInput ? window.getComputedStyle(childCountInput.parentElement).display : 'N/A');
        console.log('=== END INPUT VALUES ===');
    }
    
    let familyMemberCount = 0;
    
    function generateFamilyMembers() {
        console.log('generateFamilyMembers() called');
        
        // Get the input elements first and log them
        const spouseCountInput = document.querySelector('input[name="spouse_count"]');
        const childCountInput = document.querySelector('input[name="children_count"]');
        
        console.log('spouseCountInput element:', spouseCountInput);
        console.log('childCountInput element:', childCountInput);
        console.log('spouseCountInput value:', spouseCountInput?.value);
        console.log('childCountInput value:', childCountInput?.value);
        
        const spouseCount = parseInt(spouseCountInput?.value) || 0;
        const childCount = parseInt(childCountInput?.value) || 0;
        
        console.log('Final parsed values - spouseCount:', spouseCount, 'childCount:', childCount);
        
        const spouseName = document.querySelector('input[name="spouse_name"]')?.value || '';
        const spouseIc = document.querySelector('input[name="spouse_ic_number"]')?.value || '';
        const container = document.getElementById('family-members-container');
        
        // Clear existing
        container.innerHTML = '';
        let currentMemberIndex = 0;  // Use a local counter instead of global
        
        // Generate spouse forms
        for (let i = 1; i <= spouseCount; i++) {
            const memberDiv = document.createElement('div');
            memberDiv.className = 'family-member-card bg-gray-50 rounded-xl p-8 border-2 border-gray-200';
            memberDiv.innerHTML = `
                <div class="flex justify-between items-center mb-6">
                    <h4 class="font-semibold text-gray-700 text-lg">Spouse ${i}</h4>
                    <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                        <i class="fas fa-times"></i> Remove
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">First Name <span class="text-red-500">*</span></label>
                        <input type="text" name="family_members[${currentMemberIndex}][first_name]" value="${i === 1 ? spouseName : ''}" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Last Name</label>
                        <input type="text" name="family_members[${currentMemberIndex}][last_name]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Relationship <span class="text-red-500">*</span></label>
                        <select name="family_members[${currentMemberIndex}][relationship]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                            <option value="spouse" selected>Spouse</option>
                            <option value="child">Child</option>
                            <option value="parent">Parent</option>
                            <option value="sibling">Sibling</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Gender</label>
                        <select name="family_members[${currentMemberIndex}][gender]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                            <option value="">Select Gender</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Date of Birth</label>
                        <div class="date-picker-wrapper relative w-full">
                            <div class="relative">
                                <input 
                                    type="text" 
                                    class="date-picker family-dob w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white hover:border-gray-400 transition cursor-pointer"
                                    placeholder="Select date"
                                    readonly
                                    name="family_members[${currentMemberIndex}][date_of_birth]"
                                >
                                <i class="fas fa-calendar calendar-icon absolute right-3 top-1/2 transform -translate-y-1/2 text-orange-600 cursor-pointer text-base z-10" style="color: #ea580c !important; pointer-events: auto; display: block; visibility: visible;"></i>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">IC number will be auto-filled from DOB</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">IC Number <span class="text-xs text-gray-500">(12 digits)</span></label>
                        <input type="text" name="family_members[${currentMemberIndex}][ic_number]" value="${i === 1 ? spouseIc : ''}" maxlength="12" class="family-ic w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="YYMMDD + 6 digits">
                        <p class="text-xs text-gray-500 mt-1">First 6 digits auto-filled from DOB. Enter remaining 6 digits.</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Phone</label>
                        <input type="tel" name="family_members[${currentMemberIndex}][phone]" class="family-phone w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Numbers only">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Email</label>
                        <input type="email" name="family_members[${currentMemberIndex}][email]" class="family-email w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="valid@email.com">
                    </div>
                    <div class="md:col-span-2 bg-white p-4 rounded-lg border border-gray-200">
                        <div class="flex items-center justify-between mb-3">
                            <label class="block text-sm font-semibold text-gray-700">Address</label>
                            <button type="button" class="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-3 py-1 rounded-lg transition" onclick="copyResidentialAddressToFamily(this)">
                                <i class="fas fa-copy mr-1"></i>Copy from Residential
                            </button>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div class="md:col-span-2">
                                <input type="text" name="family_members[${currentMemberIndex}][address_line_1]" class="family-address-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Address Line 1">
                            </div>
                            <div class="md:col-span-2">
                                <input type="text" name="family_members[${currentMemberIndex}][address_line_2]" class="family-address-2 w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Address Line 2 (Optional)">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-600 mb-1">Country</label>
                                <div class="relative">
                                    <select name="family_members[${currentMemberIndex}][country]" class="family-country w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base bg-white appearance-none cursor-pointer">
                                        <option value="">Select Country</option>
                                        <option value="Malaysia" selected>Malaysia</option>
                                        <option value="Other">Other</option>
                                    </select>
                                    <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-600 mb-1">State</label>
                                <div class="relative">
                                    <select name="family_members[${currentMemberIndex}][state]" class="family-state w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base bg-white appearance-none cursor-pointer">
                                        <option value="">Select State</option>
                                    </select>
                                    <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-600 mb-1">City</label>
                                <div class="relative">
                                    <select name="family_members[${currentMemberIndex}][city]" class="family-city w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base bg-white appearance-none cursor-pointer">
                                        <option value="">Select City</option>
                                    </select>
                                    <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-600 mb-1">Postal Code</label>
                                <input type="text" name="family_members[${currentMemberIndex}][postal_code]" class="family-postal w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Postal/Pin Code">
                            </div>
                        </div>
                        <input type="hidden" name="family_members[${currentMemberIndex}][address]" class="family-address-merged">
                    </div>
                </div>
            `;
            container.appendChild(memberDiv);
            currentMemberIndex++;
        }
        
        // Generate child forms
        for (let i = 1; i <= childCount; i++) {
            const memberDiv = document.createElement('div');
            memberDiv.className = 'family-member-card bg-gray-50 rounded-xl p-8 border-2 border-gray-200';
            memberDiv.innerHTML = `
                <div class="flex justify-between items-center mb-6">
                    <h4 class="font-semibold text-gray-700 text-lg">Child ${i}</h4>
                    <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                        <i class="fas fa-times"></i> Remove
                    </button>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">First Name <span class="text-red-500">*</span></label>
                        <input type="text" name="family_members[${currentMemberIndex}][first_name]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Last Name</label>
                        <input type="text" name="family_members[${currentMemberIndex}][last_name]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Relationship <span class="text-red-500">*</span></label>
                        <select name="family_members[${currentMemberIndex}][relationship]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                            <option value="child" selected>Child</option>
                            <option value="spouse">Spouse</option>
                            <option value="parent">Parent</option>
                            <option value="sibling">Sibling</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Gender</label>
                        <select name="family_members[${currentMemberIndex}][gender]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                            <option value="">Select Gender</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Date of Birth</label>
                        <div class="date-picker-wrapper relative w-full">
                            <div class="relative">
                                <input 
                                    type="text" 
                                    class="date-picker family-dob w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white hover:border-gray-400 transition cursor-pointer"
                                    placeholder="Select date"
                                    readonly
                                    name="family_members[${currentMemberIndex}][date_of_birth]"
                                >
                                <i class="fas fa-calendar calendar-icon absolute right-3 top-1/2 transform -translate-y-1/2 text-orange-600 cursor-pointer text-base z-10" style="color: #ea580c !important; pointer-events: auto; display: block; visibility: visible;"></i>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">IC number will be auto-filled from DOB</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">IC Number <span class="text-xs text-gray-500">(12 digits)</span></label>
                        <input type="text" name="family_members[${currentMemberIndex}][ic_number]" maxlength="12" class="family-ic w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="YYMMDD + 6 digits">
                        <p class="text-xs text-gray-500 mt-1">First 6 digits auto-filled from DOB. Enter remaining 6 digits.</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Phone</label>
                        <input type="tel" name="family_members[${currentMemberIndex}][phone]" class="family-phone w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Numbers only">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-600 mb-2">Email</label>
                        <input type="email" name="family_members[${currentMemberIndex}][email]" class="family-email w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="valid@email.com">
                    </div>
                    <div class="md:col-span-2 bg-white p-4 rounded-lg border border-gray-200">
                        <div class="flex items-center justify-between mb-3">
                            <label class="block text-sm font-semibold text-gray-700">Address</label>
                            <button type="button" class="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-3 py-1 rounded-lg transition" onclick="copyResidentialAddressToFamily(this)">
                                <i class="fas fa-copy mr-1"></i>Copy from Residential
                            </button>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div class="md:col-span-2">
                                <input type="text" name="family_members[${currentMemberIndex}][address_line_1]" class="family-address-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Address Line 1">
                            </div>
                            <div class="md:col-span-2">
                                <input type="text" name="family_members[${currentMemberIndex}][address_line_2]" class="family-address-2 w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Address Line 2 (Optional)">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-600 mb-1">Country</label>
                                <div class="relative">
                                    <select name="family_members[${currentMemberIndex}][country]" class="family-country w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base bg-white appearance-none cursor-pointer">
                                        <option value="">Select Country</option>
                                        <option value="Malaysia" selected>Malaysia</option>
                                        <option value="Other">Other</option>
                                    </select>
                                    <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-600 mb-1">State</label>
                                <div class="relative">
                                    <select name="family_members[${currentMemberIndex}][state]" class="family-state w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base bg-white appearance-none cursor-pointer">
                                        <option value="">Select State</option>
                                    </select>
                                    <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-600 mb-1">City</label>
                                <div class="relative">
                                    <select name="family_members[${currentMemberIndex}][city]" class="family-city w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base bg-white appearance-none cursor-pointer">
                                        <option value="">Select City</option>
                                    </select>
                                    <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-600 mb-1">Postal Code</label>
                                <input type="text" name="family_members[${currentMemberIndex}][postal_code]" class="family-postal w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Postal/Pin Code">
                            </div>
                        </div>
                        <input type="hidden" name="family_members[${currentMemberIndex}][address]" class="family-address-merged">
                    </div>
                </div>
            `;
            container.appendChild(memberDiv);
            currentMemberIndex++;
        }
        
        // Update global counter for compatibility with other code
        familyMemberCount = currentMemberIndex;
        
        // Initialize event handlers for family member address dropdowns
        attachFamilyAddressHandlers();
        
        // Initialize date pickers for newly created family members
        setTimeout(() => {
            initializeFamilyMemberDatePickers();
        }, 100);
    }
    
    // Attach event handlers to family member address dropdowns
    function attachFamilyAddressHandlers() {
        // Find all family member cards
        const familyCards = document.querySelectorAll('.family-member-card');
        
        familyCards.forEach(card => {
            const countrySelect = card.querySelector('.family-country');
            const stateSelect = card.querySelector('.family-state');
            const citySelect = card.querySelector('.family-city');
            
            if (!countrySelect || !stateSelect || !citySelect) return;
            
            // Handle country change
            countrySelect.addEventListener('change', function() {
                const selectedCountry = this.value;
                
                // Clear state and city dropdowns
                stateSelect.innerHTML = '<option value="">Select State</option>';
                citySelect.innerHTML = '<option value="">Select City</option>';

                if (selectedCountry === 'Malaysia') {
                    // Populate Malaysian states
                    Object.keys(malaysiaStates).forEach(state => {
                        const option = document.createElement('option');
                        option.value = state;
                        option.textContent = state;
                        stateSelect.appendChild(option);
                    });
                } else if (selectedCountry) {
                    // For other countries, add a generic option
                    const option = document.createElement('option');
                    option.value = 'Other';
                    option.textContent = 'Other State/Province';
                    stateSelect.appendChild(option);
                }

                // Trigger address merge
                mergeFamilyAddress(card);
            });

            // Handle state change
            stateSelect.addEventListener('change', function() {
                const selectedState = this.value;
                const selectedCountry = countrySelect.value;
                
                // Clear city dropdown
                citySelect.innerHTML = '<option value="">Select City</option>';

                if (selectedCountry === 'Malaysia' && selectedState && malaysiaStates[selectedState]) {
                    // Populate cities for selected Malaysian state
                    malaysiaStates[selectedState].forEach(city => {
                        const option = document.createElement('option');
                        option.value = city;
                        option.textContent = city;
                        citySelect.appendChild(option);
                    });
                } else if (selectedState) {
                    // For other countries, add a generic option
                    const option = document.createElement('option');
                    option.value = 'Other';
                    option.textContent = 'Other City';
                    citySelect.appendChild(option);
                }

                // Trigger address merge
                mergeFamilyAddress(card);
            });

            // Handle city change
            citySelect.addEventListener('change', function() {
                // Trigger address merge
                mergeFamilyAddress(card);
            });

            // Initialize with Malaysia selected if it's the default
            if (countrySelect.value === 'Malaysia') {
                countrySelect.dispatchEvent(new Event('change'));
            }
        });
    }
    
    // Initialize date pickers for family members
    function initializeFamilyMemberDatePickers() {
        const dateInputs = document.querySelectorAll('.date-picker-wrapper .date-picker');
        
        dateInputs.forEach(input => {
            // Skip if already initialized
            if (input._datePickerInitialized) return;
            
            const wrapper = input.closest('.date-picker-wrapper');
            if (!wrapper) return;
            
            input._datePickerInitialized = true;
            
            const popup = wrapper.querySelector('.date-picker-popup');
            if (!popup) {
                // Create popup if it doesn't exist
                createDatePickerPopup(wrapper);
            }
            
            setupDatePickerEvents(input, wrapper);
        });
    }
    
    // Create date picker popup structure
    function createDatePickerPopup(wrapper) {
        const popup = document.createElement('div');
        popup.className = 'date-picker-popup hidden absolute top-full left-0 mt-2 bg-white rounded-2xl shadow-2xl p-6 z-50 border border-gray-200';
        popup.style.width = '360px';
        popup.innerHTML = `
            <!-- STEP 1: Calendar (Shows First) -->
            <div class="date-selection-view">
                <div class="flex items-center justify-between mb-4">
                    <button type="button" class="date-prev-month-btn p-2 hover:bg-gray-100 rounded-lg transition">
                        <i class="fas fa-chevron-left text-gray-600"></i>
                    </button>
                    <button type="button" class="current-month-year-btn text-lg font-semibold text-gray-800 hover:text-blue-600 cursor-pointer flex items-center gap-1 px-3 py-1 hover:bg-gray-50 rounded-lg transition">
                        <span class="current-month-year">JUN 2026</span>
                        <i class="fas fa-chevron-down text-xs"></i>
                    </button>
                    <button type="button" class="date-next-month-btn p-2 hover:bg-gray-100 rounded-lg transition">
                        <i class="fas fa-chevron-right text-gray-600"></i>
                    </button>
                </div>
                <div class="weekdays grid grid-cols-7 gap-1 text-center mb-2">
                    <span class="text-xs font-semibold text-gray-500 py-1">S</span>
                    <span class="text-xs font-semibold text-gray-500 py-1">M</span>
                    <span class="text-xs font-semibold text-gray-500 py-1">T</span>
                    <span class="text-xs font-semibold text-gray-500 py-1">W</span>
                    <span class="text-xs font-semibold text-gray-500 py-1">T</span>
                    <span class="text-xs font-semibold text-gray-500 py-1">F</span>
                    <span class="text-xs font-semibold text-gray-500 py-1">S</span>
                </div>
                <div class="dates-grid grid grid-cols-7 gap-1"></div>
            </div>
            
            <!-- STEP 2: Year Selection (Hidden, shown when clicking header) -->
            <div class="year-selection-view hidden">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">Select Year</h3>
                    <div class="flex gap-2">
                        <button type="button" class="year-prev-btn p-2 hover:bg-gray-100 rounded-lg transition">
                            <i class="fas fa-chevron-left text-gray-600"></i>
                        </button>
                        <span class="year-range text-sm font-semibold text-gray-700">2016 - 2039</span>
                        <button type="button" class="year-next-btn p-2 hover:bg-gray-100 rounded-lg transition">
                            <i class="fas fa-chevron-right text-gray-600"></i>
                        </button>
                    </div>
                </div>
                <div class="year-grid grid grid-cols-4 gap-2"></div>
            </div>
            
            <!-- STEP 3: Month Selection (Hidden, shown after selecting year) -->
            <div class="month-selection-view hidden">
                <div class="flex items-center justify-between mb-4">
                    <button type="button" class="year-back-btn text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1">
                        <i class="fas fa-chevron-left"></i> Back
                    </button>
                    <h3 class="text-lg font-semibold text-gray-800">Select Month</h3>
                </div>
                <p class="text-sm text-gray-600 mb-4"><span class="selected-year-display font-semibold">2026</span></p>
                <div class="month-grid grid grid-cols-3 gap-2"></div>
            </div>
        `;
        wrapper.appendChild(popup);
    }
    
    // Setup date picker events
    function setupDatePickerEvents(input, wrapper) {
        const popup = wrapper.querySelector('.date-picker-popup');
        const dateView = popup.querySelector('.date-selection-view');
        const yearView = popup.querySelector('.year-selection-view');
        const monthView = popup.querySelector('.month-selection-view');
        
        let currentYear = new Date().getFullYear();
        let currentMonth = new Date().getMonth();
        let selectedYear = currentYear;
        let selectedMonth = currentMonth;
        let yearRangeStart = 2016;
        
        const monthNames = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
        
        function showDateSelection() {
            renderDateGrid();
            dateView.classList.remove('hidden');
            yearView.classList.add('hidden');
            monthView.classList.add('hidden');
        }
        
        function showYearSelection() {
            renderYearGrid();
            dateView.classList.add('hidden');
            yearView.classList.remove('hidden');
            monthView.classList.add('hidden');
        }
        
        function showMonthSelection() {
            renderMonthGrid();
            popup.querySelector('.selected-year-display').textContent = selectedYear;
            dateView.classList.add('hidden');
            yearView.classList.add('hidden');
            monthView.classList.remove('hidden');
        }
        
        function renderDateGrid() {
            const datesGrid = popup.querySelector('.dates-grid');
            datesGrid.innerHTML = '';
            
            const firstDay = new Date(selectedYear, selectedMonth, 1).getDay();
            const daysInMonth = new Date(selectedYear, selectedMonth + 1, 0).getDate();
            const today = new Date();
            const isCurrentMonth = today.getFullYear() === selectedYear && today.getMonth() === selectedMonth;
            const todayDate = today.getDate();
            
            popup.querySelector('.current-month-year').textContent = `${monthNames[selectedMonth]} ${selectedYear}`;
            
            for (let i = 0; i < firstDay; i++) {
                datesGrid.appendChild(document.createElement('div'));
            }
            
            for (let day = 1; day <= daysInMonth; day++) {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.textContent = day;
                
                const isToday = isCurrentMonth && day === todayDate;
                
                btn.className = `date-btn p-2 text-sm rounded-lg transition ${
                    isToday
                        ? 'bg-red-600 text-white font-semibold hover:bg-red-700'
                        : 'text-gray-800 hover:bg-blue-100'
                }`;
                
                btn.addEventListener('click', (e) => {
                    e.preventDefault();
                    const date = new Date(selectedYear, selectedMonth, day);
                    const formatted = formatDate(date);
                    input.value = formatted;
                    input.dispatchEvent(new Event('change', { bubbles: true }));
                    input.dispatchEvent(new Event('input', { bubbles: true }));
                    popup.classList.add('hidden');
                });
                
                datesGrid.appendChild(btn);
            }
        }
        
        function renderYearGrid() {
            const yearGrid = popup.querySelector('.year-grid');
            yearGrid.innerHTML = '';
            
            for (let i = yearRangeStart; i < yearRangeStart + 24; i++) {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.textContent = i;
                btn.className = `year-btn p-3 text-sm rounded-lg font-medium transition ${
                    i === selectedYear
                        ? 'bg-blue-500 text-white'
                        : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
                }`;
                
                btn.addEventListener('click', () => {
                    selectedYear = i;
                    showMonthSelection();
                });
                
                yearGrid.appendChild(btn);
            }
            
            popup.querySelector('.year-range').textContent = `${yearRangeStart} - ${yearRangeStart + 23}`;
        }
        
        function renderMonthGrid() {
            const monthGrid = popup.querySelector('.month-grid');
            monthGrid.innerHTML = '';
            
            monthNames.forEach((month, idx) => {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.textContent = month;
                btn.className = `month-btn p-3 text-sm rounded-lg font-medium transition ${
                    idx === selectedMonth
                        ? 'bg-blue-500 text-white'
                        : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
                }`;
                
                btn.addEventListener('click', () => {
                    selectedMonth = idx;
                    showDateSelection();
                });
                
                monthGrid.appendChild(btn);
            });
        }
        
        function formatDate(date) {
            const day = String(date.getDate()).padStart(2, '0');
            const month = monthNames[date.getMonth()];
            const year = date.getFullYear();
            return `${day} ${month} ${year}`;
        }
        
        // Open popup - Show Calendar First
        input.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            popup.classList.remove('hidden');
            showDateSelection();
        });
        
        // Also open popup when clicking the calendar icon
        const calendarIcon = wrapper.querySelector('.calendar-icon');
        if (calendarIcon) {
            calendarIcon.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                popup.classList.remove('hidden');
                showDateSelection();
            });
        }
        
        // Close popup when clicking outside
        document.addEventListener('click', (e) => {
            if (!wrapper.contains(e.target)) {
                popup.classList.add('hidden');
            }
        });
        
        // Click header to show year selection
        popup.querySelector('.current-month-year-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            showYearSelection();
        });
        
        // Calendar month navigation
        popup.querySelector('.date-prev-month-btn').addEventListener('click', () => {
            selectedMonth--;
            if (selectedMonth < 0) {
                selectedMonth = 11;
                selectedYear--;
            }
            renderDateGrid();
        });
        
        popup.querySelector('.date-next-month-btn').addEventListener('click', () => {
            selectedMonth++;
            if (selectedMonth > 11) {
                selectedMonth = 0;
                selectedYear++;
            }
            renderDateGrid();
        });
        
        // Year navigation
        popup.querySelector('.year-prev-btn').addEventListener('click', () => {
            yearRangeStart -= 24;
            renderYearGrid();
        });
        
        popup.querySelector('.year-next-btn').addEventListener('click', () => {
            yearRangeStart += 24;
            renderYearGrid();
        });
        
        // Month back button (goes back to year selection)
        popup.querySelector('.year-back-btn').addEventListener('click', showYearSelection);
        
        // Initial render
        renderDateGrid();
    }
    
    // Test function to force generate family members
    function generateTestFamilyMembers() {
        console.log('Generating test family members...');
        const container = document.getElementById('family-members-container');
        container.innerHTML = '';
        familyMemberCount = 0;
        
        // Generate 2 spouses
        for (let i = 1; i <= 2; i++) {
            createFamilyMemberForm(`Spouse ${i}`, 'spouse', i);
        }
        
        // Generate 2 children
        for (let i = 1; i <= 2; i++) {
            createFamilyMemberForm(`Child ${i}`, 'child', i);
        }
    }
    
    // Helper function to create family member form
    function createFamilyMemberForm(title, relationship, number) {
        const container = document.getElementById('family-members-container');
        const memberDiv = document.createElement('div');
        memberDiv.className = 'family-member-card bg-gray-50 rounded-xl p-8 border-2 border-gray-200';
        memberDiv.innerHTML = `
            <div class="flex justify-between items-center mb-6">
                <h4 class="font-semibold text-gray-700 text-lg">${title}</h4>
                <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i> Remove
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">First Name</label>
                    <input type="text" name="family_members[${familyMemberCount}][first_name]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Last Name</label>
                    <input type="text" name="family_members[${familyMemberCount}][last_name]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Relationship</label>
                    <select name="family_members[${familyMemberCount}][relationship]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                        <option value="${relationship}" selected>${relationship.charAt(0).toUpperCase() + relationship.slice(1)}</option>
                        <option value="spouse">Spouse</option>
                        <option value="child">Child</option>
                        <option value="parent">Parent</option>
                        <option value="sibling">Sibling</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Gender</label>
                    <select name="family_members[${familyMemberCount}][gender]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                        <option value="">Select Gender</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Date of Birth</label>
                    <input type="text" name="family_members[${familyMemberCount}][ic_number]" maxlength="12" class="family-ic w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="YYMMDD + 6 digits">
                    <p class="text-xs text-gray-500 mt-1">First 6 digits auto-filled from DOB. Enter remaining 6 digits.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Phone</label>
                    <input type="tel" name="family_members[${familyMemberCount}][phone]" class="family-phone w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Numbers only">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Email</label>
                    <input type="email" name="family_members[${familyMemberCount}][email]" class="family-email w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="valid@email.com">
                </div>
                <div class="md:col-span-2 bg-white p-4 rounded-lg border border-gray-200">
                    <div class="flex items-center justify-between mb-3">
                            <label class="block text-sm font-semibold text-gray-700">Address</label>
                            <button type="button" class="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-3 py-1 rounded-lg transition" onclick="copyResidentialAddressToFamily(this)">
                                <i class="fas fa-copy mr-1"></i>Copy from Residential
                            </button>
                        </div>
                    <textarea name="family_members[${familyMemberCount}][address]" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none resize-none text-base" placeholder="Enter full address"></textarea>
                </div>
            </div>
        `;
        container.appendChild(memberDiv);
        familyMemberCount++;
    }
    
    let assetCount = 1;
    let liabilityCount = 1;
    let kycDocumentCount = 1;

    // Asset categories mapping (same as agent will assets)
    const assetCategories = {
        'non_movable_assets': ['House', 'Apartment', 'Land', 'Commercial Property', 'Condominium'],
        'movable_assets': ['Jewelry', 'Electronics', 'Furniture', 'Art', 'Collectibles'],
        'car_and_automobiles': ['Car', 'Motorcycle', 'Truck', 'Boat', 'Aircraft'],
        'monies_and_accounts': ['Savings Account', 'Current Account', 'Fixed Deposit', 'Joint Account', 'Investment Account', 'EPF', 'Insurance Policy'],
        'digital_assets': ['Cryptocurrency', 'Digital Art', 'Domain Names', 'Software', 'Online Accounts'],
        'personal_assets': ['Clothing', 'Books', 'Personal Documents', 'Photos', 'Memorabilia'],
        'other_assets': ['Business Interest', 'Intellectual Property', 'Goodwill', 'Other']
    };

    function updateSubCategory(mainSelect, index) {
        const subSelect = document.getElementById('sub_category_' + index);
        if (!subSelect) return;

        const selectedCategory = mainSelect.value;
        subSelect.innerHTML = '';

        if (!selectedCategory) {
            subSelect.innerHTML = '<option value="">Select Main Category first</option>';
            return;
        }

        const types = assetCategories[selectedCategory] || [];
        subSelect.innerHTML = '<option value="">Select Asset Type</option>';
        types.forEach(type => {
            const option = document.createElement('option');
            option.value = type.toLowerCase().replace(/\s+/g, '_');
            option.textContent = type;
            subSelect.appendChild(option);
        });
    }
    const steps = ['personal', 'contact', 'emergency', 'account', 'family', 'assets', 'liabilities', 'kyc'];
    
    function showTab(tabId, validate = false) {
        if (validate && !validateCurrentStep()) {
            return;
        }
        
        // Hide all tabs
        document.querySelectorAll('.tab-content').forEach(tab => {
            tab.classList.add('hidden');
        });
        
        // Show selected tab
        document.getElementById(tabId + '-content').classList.remove('hidden');
        
        // Auto-generate family members when family tab opens
        if (tabId === 'family') {
            console.log('Family tab opened, checking container');
            const container = document.getElementById('family-members-container');
            console.log('Container found:', container);
            console.log('Container children count:', container?.children.length);
            if (container && container.children.length === 0) {
                console.log('Calling generateFamilyMembers()');
                generateFamilyMembers();
                
                // Force generation for testing if nothing was generated
                setTimeout(() => {
                    if (container.children.length === 0) {
                        console.log('No family members generated, forcing test generation...');
                        // Force generate 2 spouses and 2 children for testing
                        generateTestFamilyMembers();
                    }
                }, 100);
            } else {
                console.log('Not generating - container already has content or not found');
            }
        }
        
        // Update step indicators
        const stepIndex = steps.indexOf(tabId);
        currentStep = stepIndex;
        
        steps.forEach((step, index) => {
            const circle = document.getElementById(step + '-circle');
            const label = document.getElementById(step + '-label');
            const connector = document.getElementById('connector-' + index);
            
            if (index <= stepIndex) {
                circle.classList.remove('bg-gray-200', 'text-gray-500');
                circle.classList.add('bg-green-600', 'text-white');
                label.classList.remove('text-gray-400');
                label.classList.add('text-green-600', 'font-semibold');
            } else {
                circle.classList.add('bg-gray-200', 'text-gray-500');
                circle.classList.remove('bg-green-600', 'text-white');
                label.classList.add('text-gray-400');
                label.classList.remove('text-green-600', 'font-semibold');
            }
            
            // Update connectors
            if (connector) {
                if (index < stepIndex) {
                    connector.style.width = '100%';
                } else {
                    connector.style.width = '0%';
                }
            }
        });
    }
    
    function validateCurrentStep() {
        try {
            const currentTab = document.getElementById(steps[currentStep] + '-content');
            if (!currentTab) {
                console.error('Current tab not found:', steps[currentStep]);
                return true;
            }

            const requiredFields = currentTab.querySelectorAll('input[required], select[required], textarea[required]');
            let isValid = true;
            let errorMessages = [];

            // Check required fields
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                    field.classList.add('border-red-500');
                } else {
                    field.classList.remove('border-red-500');
                }
            });

            // Step-specific validations
            const currentStepName = steps[currentStep];

            if (currentStepName === 'personal') {
                const firstName = currentTab.querySelector('input[name="first_name"]');
                const lastName = currentTab.querySelector('input[name="last_name"]');

                if (firstName && !validateNameField(firstName)) {
                    isValid = false;
                    errorMessages.push('First name: Only letters allowed');
                }
                if (lastName && !validateNameField(lastName)) {
                    isValid = false;
                    errorMessages.push('Last name: Only letters allowed');
                }

                const icNumber = currentTab.querySelector('input[name="ic_number"]');
                if (icNumber && icNumber.value && !validateICNumber(icNumber)) {
                    isValid = false;
                    errorMessages.push('IC Number: Must be exactly 12 digits');
                }

                const dob = currentTab.querySelector('input[name="date_of_birth"]');
                if (dob && dob.value && !validateDateOfBirth(dob)) {
                    isValid = false;
                    errorMessages.push('Date of Birth: Cannot be in the future');
                }
            }

            if (currentStepName === 'contact') {
                const phone = currentTab.querySelector('input[name="phone"]');
                const altPhone = currentTab.querySelector('input[name="alternative_phone"]');

                if (phone && phone.value && !validatePhoneField(phone)) {
                    isValid = false;
                    errorMessages.push('Phone: Only numbers allowed');
                }
                if (altPhone && altPhone.value && !validatePhoneField(altPhone)) {
                    isValid = false;
                    errorMessages.push('Alternative Phone: Only numbers allowed');
                }

                const email = currentTab.querySelector('input[name="email"]');
                if (email && email.value && !validateEmail(email)) {
                    isValid = false;
                    errorMessages.push('Email: Please enter a valid email address');
                }
            }

            if (currentStepName === 'emergency') {
                const emergencyName = currentTab.querySelector('input[name="emergency_contact_name"]');
                const emergencyPhone = currentTab.querySelector('input[name="emergency_contact_phone"]');
                const emergencyEmail = currentTab.querySelector('input[name="emergency_email"]');

                if (emergencyName && emergencyName.value && !validateNameField(emergencyName)) {
                    isValid = false;
                    errorMessages.push('Emergency Name: Only letters allowed');
                }
                if (emergencyPhone && emergencyPhone.value && !validatePhoneField(emergencyPhone)) {
                    isValid = false;
                    errorMessages.push('Emergency Phone: Only numbers allowed');
                }
                if (emergencyEmail && emergencyEmail.value && !validateEmail(emergencyEmail)) {
                    isValid = false;
                    errorMessages.push('Emergency Email: Please enter a valid email address');
                }
            }

            if (currentStepName === 'family') {
                const maritalStatus = document.getElementById('marital_status')?.value;
                const spouseICContainer = document.getElementById('spouse_ic_container');

                if (maritalStatus === 'married' && spouseICContainer && spouseICContainer.style.display !== 'none') {
                    const spouseIC = currentTab.querySelector('input[name="spouse_ic_number"]');
                    if (spouseIC && spouseIC.value && !validateICNumber(spouseIC)) {
                        isValid = false;
                        errorMessages.push('Spouse IC: Must be exactly 12 digits');
                    }
                }

                const familyMembers = currentTab.querySelectorAll('.family-member-card');
                familyMembers.forEach((member, index) => {
                    const memberNum = index + 1;

                    const firstName = member.querySelector('input[name*="[first_name]"]');
                    if (firstName && !firstName.value.trim()) {
                        isValid = false;
                        errorMessages.push(`Family Member ${memberNum}: First Name is required`);
                        firstName.classList.add('border-red-500');
                    }

                    const icField = member.querySelector('.family-ic');
                    if (icField && icField.value && !validateFamilyIC(icField)) {
                        isValid = false;
                        errorMessages.push(`Family Member ${memberNum}: IC must be exactly 12 digits`);
                    }

                    const dobField = member.querySelector('.family-dob');
                    if (dobField && dobField.value && !validateFamilyDOB(dobField)) {
                        isValid = false;
                        errorMessages.push(`Family Member ${memberNum}: Date of Birth cannot be in the future`);
                    }

                    const emailField = member.querySelector('.family-email');
                    if (emailField && emailField.value && !validateEmail(emailField)) {
                        isValid = false;
                        errorMessages.push(`Family Member ${memberNum}: Please enter a valid email address`);
                    }

                    mergeFamilyAddress(member);
                });
            }

            if (currentStepName === 'account') {
                const jointWillFields = document.getElementById('joint-will-fields');
                if (jointWillFields && jointWillFields.style.display !== 'none') {
                    const jointPersonIC = currentTab.querySelector('input[name="joint_person_ic_number"]');
                    if (jointPersonIC && jointPersonIC.value && !validateICNumber(jointPersonIC)) {
                        isValid = false;
                        errorMessages.push('Joint Person IC: Must be exactly 12 digits');
                    }

                    const jointSpouseIC = currentTab.querySelector('input[name="joint_spouse_ic_number"]');
                    if (jointSpouseIC && jointSpouseIC.value && !validateICNumber(jointSpouseIC)) {
                        isValid = false;
                        errorMessages.push('Joint Spouse IC: Must be exactly 12 digits');
                    }
                }
            }

            if (currentStepName === 'assets') {
                const assetCards = currentTab.querySelectorAll('.asset-card');
                let hasOwnershipErrors = false;

                assetCards.forEach((card, index) => {
                    const isValidOwnership = validateAssetOwnership(index);
                    if (!isValidOwnership) {
                        hasOwnershipErrors = true;
                        const totalDisplay = document.getElementById(`total-ownership-${index}`);
                        const total = totalDisplay ? totalDisplay.textContent : 'unknown';
                        errorMessages.push(`Asset ${index + 1}: Total ownership must be exactly 100% (currently ${total})`);
                    }
                });

                if (hasOwnershipErrors) {
                    isValid = false;
                }
            }

            if (!isValid) {
                if (errorMessages.length > 0) {
                    alert('Please fix the following errors:\n\n' + errorMessages.join('\n'));
                } else {
                    alert('Please fill in all required fields before continuing.');
                }
            }

            return isValid;
        } catch (error) {
            console.error('Error in validateCurrentStep:', error);
            alert('An error occurred during validation. Please check the console (F12) for details.');
            return false;
        }
    }
    
    // Handle Emergency Contact Relationship Change
    function handleRelationshipChange() {
        const selectValue = document.getElementById('emergencyContactRelationship').value;
        const otherDiv = document.getElementById('otherRelationshipDiv');
        const otherTextarea = document.querySelector('[name="emergency_contact_relationship_other"]');
        
        if (selectValue === 'Others') {
            otherDiv.style.display = 'block';
            otherTextarea.setAttribute('required', 'required');
        } else {
            otherDiv.style.display = 'none';
            otherTextarea.removeAttribute('required');
            otherTextarea.value = '';
        }
    }
    
    function hideErrors() {
        document.getElementById('error-container').classList.add('hidden');
    }
    
    function addFamilyMember() {
        const container = document.getElementById('family-members-container');
        const newMember = document.createElement('div');
        newMember.className = 'family-member-card bg-gray-50 rounded-xl p-8 border-2 border-gray-200';
        newMember.innerHTML = `
            <div class="flex justify-between items-center mb-6">
                <h4 class="font-semibold text-gray-700 text-lg">Family Member ${familyMemberCount + 1}</h4>
                <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">First Name</label>
                    <input type="text" name="family_members[${familyMemberCount}][first_name]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Last Name</label>
                    <input type="text" name="family_members[${familyMemberCount}][last_name]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Relationship</label>
                    <select name="family_members[${familyMemberCount}][relationship]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                        <option value="">Select</option>
                        <option value="spouse">Spouse</option>
                        <option value="child">Child</option>
                        <option value="parent">Parent</option>
                        <option value="sibling">Sibling</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Gender</label>
                    <select name="family_members[${familyMemberCount}][gender]" class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base">
                        <option value="">Select Gender</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Date of Birth</label>
                    <div class="date-picker-wrapper relative w-full">
                        <div class="relative">
                            <input 
                                type="text" 
                                class="date-picker family-dob w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white hover:border-gray-400 transition cursor-pointer"
                                placeholder="Select date"
                                readonly
                                name="family_members[${familyMemberCount}][date_of_birth]"
                            >
                            <i class="fas fa-calendar calendar-icon absolute right-3 top-1/2 transform -translate-y-1/2 text-orange-600 cursor-pointer text-base z-10" style="color: #ea580c !important; pointer-events: auto; display: block; visibility: visible;"></i>
                        </div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">IC number will be auto-filled from DOB</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">IC Number <span class="text-xs text-gray-500">(12 digits)</span></label>
                    <input type="text" name="family_members[${familyMemberCount}][ic_number]" maxlength="12" class="family-ic w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="YYMMDD + 6 digits">
                    <p class="text-xs text-gray-500 mt-1">First 6 digits auto-filled from DOB. Enter remaining 6 digits.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Phone</label>
                    <input type="tel" name="family_members[${familyMemberCount}][phone]" class="family-phone w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Numbers only">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">Email</label>
                    <input type="email" name="family_members[${familyMemberCount}][email]" class="family-email w-full px-4 py-4 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="valid@email.com">
                </div>
                <div class="md:col-span-2 bg-white p-4 rounded-lg border border-gray-200">
                    <div class="flex items-center justify-between mb-3">
                            <label class="block text-sm font-semibold text-gray-700">Address</label>
                            <button type="button" class="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-3 py-1 rounded-lg transition" onclick="copyResidentialAddressToFamily(this)">
                                <i class="fas fa-copy mr-1"></i>Copy from Residential
                            </button>
                        </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div class="md:col-span-2">
                            <input type="text" name="family_members[${familyMemberCount}][address_line_1]" class="family-address-1 w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Address Line 1">
                        </div>
                        <div class="md:col-span-2">
                            <input type="text" name="family_members[${familyMemberCount}][address_line_2]" class="family-address-2 w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Address Line 2 (Optional)">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">Country</label>
                            <div class="relative">
                                <select name="family_members[${familyMemberCount}][country]" class="family-country w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base bg-white appearance-none cursor-pointer">
                                    <option value="">Select Country</option>
                                    <option value="Malaysia" selected>Malaysia</option>
                                    <option value="Other">Other</option>
                                </select>
                                <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">State</label>
                            <div class="relative">
                                <select name="family_members[${familyMemberCount}][state]" class="family-state w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base bg-white appearance-none cursor-pointer">
                                    <option value="">Select State</option>
                                </select>
                                <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">City</label>
                            <div class="relative">
                                <select name="family_members[${familyMemberCount}][city]" class="family-city w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base bg-white appearance-none cursor-pointer">
                                    <option value="">Select City</option>
                                </select>
                                <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-600 mb-1">Postal Code</label>
                            <input type="text" name="family_members[${familyMemberCount}][postal_code]" class="family-postal w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-purple-500 outline-none text-base" placeholder="Postal/Pin Code">
                        </div>
                    </div>
                    <input type="hidden" name="family_members[${familyMemberCount}][address]" class="family-address-merged">
                </div>
            </div>
        `;
        container.appendChild(newMember);
        
        // Setup validation for the new family member fields
        setupFamilyMemberValidation(newMember);
        
        // Initialize date picker for the new family member
        setTimeout(() => {
            initializeFamilyMemberDatePickers();
        }, 50);
        
        familyMemberCount++;
    }
    
    // Joint Will Field Toggling
    function handleWillTypeChange() {
        const willTypeSelect = document.getElementById('will_type_preference');
        const jointWillFields = document.getElementById('joint-will-fields');
        
        if (!willTypeSelect || !jointWillFields) {
            return;
        }
        
        if (willTypeSelect.value === 'joint_will') {
            jointWillFields.classList.remove('hidden');
        } else {
            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');
            }
        }
    }

    function handleJointMaritalStatusChange() {
        const maritalStatusSelect = document.querySelector('select[name="joint_person_marital_status"]');
        const spouseFields = document.getElementById('joint-spouse-fields');
        
        if (!maritalStatusSelect || !spouseFields) {
            return;
        }
        
        if (maritalStatusSelect.value === 'married') {
            spouseFields.classList.remove('hidden');
        } else {
            spouseFields.classList.add('hidden');
        }
    }

    function addAsset() {
        const container = document.getElementById('assets-container');
        const newAsset = document.createElement('div');
        newAsset.className = 'asset-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200';
        newAsset.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="font-semibold text-gray-700">Asset ${assetCount + 1}</h4>
                <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-folder text-blue-600 mr-2 text-base"></i>
                        Category (Main) <span class="text-red-500 ml-1">*</span>
                    </label>
                    <select name="assets[${assetCount}][main_category]" id="main_category_${assetCount}" onchange="updateSubCategory(this, ${assetCount})"
                            class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 outline-none appearance-none text-gray-900">
                        <option value="">Select Main Category</option>
                        <option value="non_movable_assets">Non-Movable Assets (Immovable)</option>
                        <option value="movable_assets">Movable Assets</option>
                        <option value="car_and_automobiles">Car and Automobiles</option>
                        <option value="monies_and_accounts">Monies and Accounts</option>
                        <option value="digital_assets">Digital Assets</option>
                        <option value="personal_assets">Personal Assets</option>
                        <option value="other_assets">Other Assets</option>
                    </select>
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-home text-blue-600 mr-2 text-base"></i>
                        Asset Type <span class="text-red-500 ml-1">*</span>
                    </label>
                    <select name="assets[${assetCount}][type]" id="sub_category_${assetCount}"
                            onchange="updateAssetDropdowns()"
                            class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 outline-none appearance-none text-gray-900">
                        <option value="">Select Main Category first</option>
                    </select>
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-users text-blue-600 mr-2 text-base"></i>
                        Ownership Type
                    </label>
                    <select name="assets[${assetCount}][ownership_type]" onchange="toggleCoOwners(this, ${assetCount})" class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 outline-none appearance-none text-gray-900">
                        <option value="single">Sole Ownership</option>
                        <option value="joint">Joint Ownership</option>
                        <option value="tenancy_in_common">Tenancy in Common</option>
                    </select>
                </div>
                <div class="md:col-span-2 group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-file-alt text-blue-600 mr-2 text-base"></i>
                        Description
                    </label>
                    <input type="text" name="assets[${assetCount}][description]" 
                           oninput="updateAssetDropdowns()"
                           class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 outline-none text-gray-900" 
                           placeholder="e.g., 3-bedroom house in KL">
                </div>
                <div class="md:col-span-2 group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-map-marker-alt text-blue-600 mr-2 text-base"></i>
                        Location
                    </label>
                    <input type="text" name="assets[${assetCount}][location]" 
                           oninput="updateAssetDropdowns()"
                           class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 outline-none text-gray-900" 
                           placeholder="e.g., No. 123, Jalan Tun Razak">
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-calendar-alt text-blue-600 mr-2 text-base"></i>
                        Year Acquired
                    </label>
                    <input type="number" name="assets[${assetCount}][acquisition_year]" min="1950" max="2099" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 outline-none text-gray-900">
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-percentage text-blue-600 mr-2 text-base"></i>
                        Ownership %
                    </label>
                    <input type="number" name="assets[${assetCount}][ownership_percentage]" min="0" max="100" step="1"
                               class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 outline-none text-gray-900">
                    <p class="text-xs text-gray-500 mt-1">For sole ownership, this will automatically be set to 100%</p>
                </div>
                <div id="co-owners-section-${assetCount}" class="md:col-span-2 hidden">
                    <div class="bg-green-50 rounded-xl p-4 border-2 border-green-200">
                        <label class="block text-sm font-semibold text-gray-700 mb-3">
                            <i class="fas fa-users text-green-600 mr-2"></i>Number of Co-owners
                        </label>
                        <div class="flex items-center gap-3 mb-4">
                            <input type="number" id="co-owners-count-${assetCount}" min="1" max="10" value="1" 
                                   class="w-24 px-3 py-2 border border-gray-300 rounded-lg focus:border-green-500 outline-none"
                                   onchange="generateCoOwnerRows(${assetCount})">
                            <button type="button" onclick="generateCoOwnerRows(${assetCount})" 
                                    class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all text-sm">
                                <i class="fas fa-sync-alt mr-1"></i>Update Rows
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mb-4">Enter the number of joint owners (excluding yourself)</p>
                        <div id="co-owners-rows-${assetCount}" class="space-y-3"></div>
                    </div>
                </div>
                
                <div id="asset-liability-details-${assetCount}" class="md:col-span-2 hidden">
                    <div class="bg-red-50 rounded-xl p-4 border-2 border-red-200">
                        <h5 class="font-semibold text-red-700 mb-3"><i class="fas fa-credit-card mr-2"></i>Liability Details</h5>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Liability Type</label>
                                <select name="assets[${assetCount}][liability_type]" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-red-500 outline-none bg-white">
                                    <option value="">Select type</option>
                                    <option value="housing_loan">Housing Loan / Mortgage</option>
                                    <option value="personal_loan">Personal Loan</option>
                                    <option value="car_loan">Car Loan</option>
                                    <option value="business_loan">Business Loan</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            <div class="group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Amount Owed (RM)</label>
                                <input type="number" name="assets[${assetCount}][liability_amount]" step="0.01" placeholder="e.g., 350000" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-red-500 outline-none bg-white">
                            </div>
                            <div class="md:col-span-2 group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Creditor/Bank</label>
                                <input type="text" name="assets[${assetCount}][liability_creditor]" placeholder="e.g., Maybank, CIMB" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-red-500 outline-none bg-white">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="collateral-details-${assetCount}" class="md:col-span-2 hidden">
                    <label class="block text-sm font-medium text-gray-600 mb-1">Collateral Details</label>
                    <input type="text" name="assets[${assetCount}][collateral_details]" placeholder="e.g., Pledged for housing loan with Maybank" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 outline-none">
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-dollar-sign text-blue-600 mr-2 text-base"></i>
                        Current Value (RM)
                    </label>
                    <input type="number" name="assets[${assetCount}][value]" step="0.01" 
                           oninput="updateAssetDropdowns()"
                           class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 outline-none text-gray-900">
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-chart-line text-blue-600 mr-2 text-base"></i>
                        Market Value (RM)
                    </label>
                    <input type="number" name="assets[${assetCount}][market_value]" step="0.01" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 outline-none text-gray-900">
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-chart-line text-green-600 mr-2 text-base"></i>
                        Monthly Income (RM)
                    </label>
                    <input type="number" name="assets[${assetCount}][monthly_income]" step="0.01" placeholder="0.00" 
                           class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 outline-none text-gray-900">
                    <div class="text-xs text-gray-500 mt-1">Enter the actual monthly income this asset generates</div>
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-tag text-green-600 mr-2 text-base"></i>
                        Income Source Type
                    </label>
                    <select name="assets[${assetCount}][income_type]" 
                            class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 outline-none appearance-none text-gray-900">
                        <option value="">Select Income Type</option>
                        <option value="rent">Rental Income</option>
                        <option value="interest">Interest/Dividends</option>
                        <option value="business">Business Income</option>
                        <option value="farm">Agricultural Income</option>
                        <option value="other">Other Income</option>
                    </select>
                </div>
                <div class="md:col-span-2 group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-sticky-note text-green-600 mr-2 text-base"></i>
                        Income Description
                    </label>
                    <input type="text" name="assets[${assetCount}][income_description]" 
                           placeholder="Describe the income source"
                           class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-green-500 outline-none text-gray-900">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-600 mb-1">Notes</label>
                    <textarea name="assets[${assetCount}][notes]" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 outline-none resize-none"></textarea>
                </div>
                
                <!-- Per-Asset Ownership Validation -->
                <div class="md:col-span-2 mt-4">
                    <div id="ownership-warning-${assetCount}" class="hidden rounded-xl border-2 p-4">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-xl mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-semibold" id="ownership-warning-title-${assetCount}">Warning</h4>
                                <p class="text-sm mt-1" id="ownership-warning-message-${assetCount}"></p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-2 p-3 bg-gray-50 rounded-xl border border-gray-200 flex items-center justify-between">
                        <span class="text-sm font-medium text-gray-700">Asset ${assetCount + 1} Total Ownership:</span>
                        <span id="total-ownership-${assetCount}" class="text-lg font-bold text-gray-900">100%</span>
                    </div>
                </div>
            </div>
        `;
        container.appendChild(newAsset);
        const currentAssetIndex = assetCount;
        assetCount++;
        
        // Initialize the newly added asset with sole ownership = 100%
        const ownershipSelect = newAsset.querySelector(`select[name$="[ownership_type]"]`);
        if (ownershipSelect) {
            toggleCoOwners(ownershipSelect, currentAssetIndex);
        }
        
        updateAssetDropdowns();
    }
    
    function toggleCoOwners(selectElement, index) {
        const coOwnersSection = document.getElementById('co-owners-section-' + index);
        const ownershipInput = document.querySelector(`input[name="assets[${index}][ownership_percentage]"]`);

        if (selectElement.value === 'joint' || selectElement.value === 'tenancy_in_common') {
            coOwnersSection.classList.remove('hidden');
            // For joint ownership, allow user to set their percentage
            if (ownershipInput) {
                ownershipInput.readOnly = false;
                ownershipInput.classList.remove('bg-gray-100');
                ownershipInput.removeAttribute('disabled');
                // Don't auto-change value, let user decide
            }
            // validateAssetOwnership(index); // Disabled to prevent automatic value changes
        } else {
            coOwnersSection.classList.add('hidden');
            // For SOLE ownership, always set to exactly 100 and make readonly
            if (ownershipInput) {
                ownershipInput.value = 100;
                ownershipInput.readOnly = true;
                ownershipInput.disabled = true;
                ownershipInput.classList.add('bg-gray-100');
                ownershipInput.classList.add('cursor-not-allowed');
            }
            // Clear co-owners as they're not applicable for single ownership
            const coOwnersCount = document.getElementById(`co-owners-count-${index}`);
            const coOwnersRows = document.getElementById(`co-owners-rows-${index}`);
            if (coOwnersCount) coOwnersCount.value = 1;
            if (coOwnersRows) coOwnersRows.innerHTML = '';
            // validateAssetOwnership(index); // Disabled to prevent automatic value changes
        }
    }
    
    function generateCoOwnerRows(index) {
        const count = document.getElementById('co-owners-count-' + index).value;
        const container = document.getElementById('co-owners-rows-' + index);
        container.innerHTML = '';

        for (let i = 0; i < count; i++) {
            const row = document.createElement('div');
            row.className = 'bg-white rounded-lg p-3 border border-gray-200';
            row.innerHTML = `
                <h6 class="text-sm font-semibold text-gray-700 mb-2">Co-owner ${i + 1}</h6>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Name</label>
                        <input type="text" name="assets[${index}][co_owners][${i}][name]" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-green-500 outline-none text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">IC/Passport</label>
                        <input type="text" name="assets[${index}][co_owners][${i}][ic_number]" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-green-500 outline-none text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Relationship</label>
                        <input type="text" name="assets[${index}][co_owners][${i}][relationship]" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-green-500 outline-none text-sm" placeholder="e.g., Spouse, Sibling">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Ownership %</label>
                        <input type="text" inputmode="numeric" pattern="[0-9]*" name="assets[${index}][co_owners][${i}][ownership_percentage]" value="0" placeholder="0-100" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-green-500 outline-none text-sm co-owner-ownership-input" data-asset-index="${index}" data-co-owner-index="${i}">
                    </div>
                </div>
            `;
            container.appendChild(row);
        }
    }
    
    // Validate co-owner ownership percentage input
    function validateCoOwnerInput(input) {
        // Do nothing - HTML5 number input with min/max handles validation
        // Don't modify any values
    }
    
    // Per-asset ownership validation
    function validateAssetOwnership(assetIndex) {
        const ownershipInput = document.querySelector(`input[name="assets[${assetIndex}][ownership_percentage]"]`);
        const ownershipType = document.querySelector(`select[name="assets[${assetIndex}][ownership_type]"]`)?.value || 'single';

        if (!ownershipInput) return true; // Return true if no input found

        // Read the current value WITHOUT modifying it
        let userOwnership = parseFloat(ownershipInput.value) || 0;

        // For single ownership, use 100% for calculation but don't auto-change user input
        if (ownershipType === 'single') {
            userOwnership = 100;
        }

        // Calculate co-owners total with rounding to prevent floating-point precision issues
        let coOwnersTotal = 0;
        const coOwnerInputs = document.querySelectorAll(`input[name^="assets[${assetIndex}][co_owners]"][name$="[ownership_percentage]"]`);
        coOwnerInputs.forEach(input => {
            coOwnersTotal += parseFloat(input.value) || 0;
        });

        // Round to 2 decimal places to prevent floating-point precision issues
        coOwnersTotal = Math.round(coOwnersTotal * 100) / 100;
        userOwnership = Math.round(userOwnership * 100) / 100;

        // Total ownership for this asset
        const total = Math.round((userOwnership + coOwnersTotal) * 100) / 100;

        // Update display
        const totalDisplay = document.getElementById(`total-ownership-${assetIndex}`);
        const warningDiv = document.getElementById(`ownership-warning-${assetIndex}`);
        const warningTitle = document.getElementById(`ownership-warning-title-${assetIndex}`);
        const warningMessage = document.getElementById(`ownership-warning-message-${assetIndex}`);

        if (totalDisplay) {
            totalDisplay.textContent = total.toFixed(1) + '%';

            // Color code the total
            if (total === 100) {
                totalDisplay.className = 'text-lg font-bold text-green-600';
            } else if (total > 100) {
                totalDisplay.className = 'text-lg font-bold text-red-600';
            } else {
                totalDisplay.className = 'text-lg font-bold text-yellow-600';
            }
        }

        // Show/hide warning
        if (warningDiv && warningTitle && warningMessage) {
            if (total !== 100) {
                warningDiv.classList.remove('hidden');

                if (total > 100) {
                    warningDiv.className = 'rounded-xl border-2 border-red-300 bg-red-50 p-4 mb-3';
                    warningDiv.querySelector('i').className = 'fas fa-exclamation-circle text-xl mr-3 mt-1 text-red-500';
                    warningTitle.className = 'font-semibold text-red-800';
                    warningTitle.textContent = 'Error: Total Exceeds 100%';
                    warningMessage.className = 'text-sm mt-1 text-red-700';
                    warningMessage.textContent = `Total ownership is ${total.toFixed(1)}% (Your ${userOwnership}% + Co-owners ${coOwnersTotal}%). Must equal exactly 100%.`;
                } else {
                    warningDiv.className = 'rounded-xl border-2 border-yellow-300 bg-yellow-50 p-4 mb-3';
                    warningDiv.querySelector('i').className = 'fas fa-exclamation-triangle text-xl mr-3 mt-1 text-yellow-500';
                    warningTitle.className = 'font-semibold text-yellow-800';
                    warningTitle.textContent = 'Warning: Total Less Than 100%';
                    warningMessage.className = 'text-sm mt-1 text-yellow-700';
                    warningMessage.textContent = `Total ownership is ${total.toFixed(1)}% (Your ${userOwnership}% + Co-owners ${coOwnersTotal}%). Must equal exactly 100%.`;
                }
            } else {
                warningDiv.classList.add('hidden');
            }
        }

        return total === 100;
    }

    // Legacy function for backward compatibility - validates all assets
    function calculateTotalOwnership() {
        // Find all asset indices
        const assetCards = document.querySelectorAll('.asset-card');
        assetCards.forEach((card, index) => {
            // validateAssetOwnership(index); // Disabled to prevent automatic value changes
        });
    }
    
    function toggleCollateral(checkbox, index) {
        const collateralDetails = document.getElementById('collateral-details-' + index);
        if (checkbox.checked) {
            collateralDetails.classList.remove('hidden');
        } else {
            collateralDetails.classList.add('hidden');
        }
    }
    
    function toggleAssetLiability(checkbox, index) {
        const liabilityDetails = document.getElementById('asset-liability-details-' + index);
        if (checkbox.checked) {
            liabilityDetails.classList.remove('hidden');
        } else {
            liabilityDetails.classList.add('hidden');
        }
    }
    
    function updateAssetDropdowns() {
        const assetSelects = document.querySelectorAll('.liability-asset-select');
        const assetCards = document.querySelectorAll('.asset-card');
        
        assetSelects.forEach(select => {
            const currentValue = select.value;
            select.innerHTML = '<option value="">-- Select an asset this loan is for --</option>';
            
            assetCards.forEach((card, index) => {
                // Get asset details to create a comprehensive display
                const description = card.querySelector('input[name*="[description]"]')?.value || '';
                const type = card.querySelector('select[name*="[type]"]')?.selectedOptions[0]?.text || '';
                const location = card.querySelector('input[name*="[location]"]')?.value || '';
                const value = card.querySelector('input[name*="[value]"]')?.value || '';
                
                // Build a comprehensive display text
                let displayText = '';
                
                if (description) {
                    displayText = description;
                } else if (type && type !== 'Select Main Category first') {
                    displayText = type;
                    if (location) {
                        displayText += ` - ${location}`;
                    }
                } else {
                    displayText = `Asset ${index + 1}`;
                }
                
                // Add value if available
                if (value) {
                    displayText += ` (RM ${parseFloat(value).toLocaleString()})`;
                }
                
                const option = document.createElement('option');
                option.value = index;
                option.textContent = displayText;
                select.appendChild(option);
            });
            
            select.value = currentValue;
        });
    }
    
    function updateAssetLiabilityLink(select, liabilityIndex) {
        const assetIndex = select.value;
        const hiddenField = document.getElementById('liability-asset-ref-' + liabilityIndex);
        
        if (assetIndex) {
            const assetCard = document.querySelectorAll('.asset-card')[assetIndex];
            const description = assetCard.querySelector('input[name*="[description]"]')?.value || '';
            hiddenField.value = description;
        } else {
            hiddenField.value = '';
        }
    }
    
    function addLiability() {
        const container = document.getElementById('liabilities-container');
        const newLiability = document.createElement('div');
        newLiability.className = 'liability-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200';
        newLiability.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="font-semibold text-gray-700">Liability ${liabilityCount + 1}</h4>
                <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-file-invoice text-red-600 mr-2 text-base"></i>
                        Liability Type
                    </label>
                    <select name="liabilities[${liabilityCount}][type]" class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-red-500 outline-none appearance-none text-gray-900">
                        <option value="">Select type</option>
                        <option value="housing_loan">Housing Loan / Mortgage</option>
                        <option value="personal_loan">Personal Loan</option>
                        <option value="car_loan">Car Loan</option>
                        <option value="business_loan">Business Loan</option>
                        <option value="credit_card">Credit Card Debt</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-university text-red-600 mr-2 text-base"></i>
                        Creditor/Bank
                    </label>
                    <input type="text" name="liabilities[${liabilityCount}][creditor]" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-red-500 outline-none text-gray-900" placeholder="e.g., Maybank">
                </div>
                <div class="md:col-span-2 group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-link text-red-600 mr-2 text-base"></i>
                        Linked Asset (Optional)
                    </label>
                    <div class="relative">
                        <select name="liabilities[${liabilityCount}][linked_asset_index]" 
                                class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-red-500 outline-none appearance-none text-gray-900 liability-asset-select"
                                onchange="updateAssetLiabilityLink(this, ${liabilityCount})">
                            <option value="">-- Select an asset this loan is for --</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 text-sm"></i>
                        </div>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">If this loan/mortgage is tied to a specific asset, select it here</p>
                </div>
                <input type="hidden" name="liabilities[${liabilityCount}][asset_reference]" id="liability-asset-ref-${liabilityCount}">
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-dollar-sign text-red-600 mr-2 text-base"></i>
                        Amount Owed (RM)
                    </label>
                    <input type="number" name="liabilities[${liabilityCount}][amount]" step="0.01" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-red-500 outline-none text-gray-900">
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-calendar-alt text-red-600 mr-2 text-base"></i>
                        Monthly Payment (RM)
                    </label>
                    <input type="number" name="liabilities[${liabilityCount}][monthly_payment]" step="0.01" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-red-500 outline-none text-gray-900">
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-balance-scale text-red-600 mr-2 text-base"></i>
                        Outstanding Balance (RM)
                    </label>
                    <input type="number" name="liabilities[${liabilityCount}][outstanding_balance]" step="0.01" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-red-500 outline-none text-gray-900">
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-clock text-red-600 mr-2 text-base"></i>
                        Due Date
                    </label>
                    <input type="date" name="liabilities[${liabilityCount}][due_date]" class="liability-due-date w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-red-500 outline-none text-gray-900" data-flatpickr>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-600 mb-1">Description</label>
                    <textarea name="liabilities[${liabilityCount}][description]" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:border-red-500 outline-none resize-none"></textarea>
                </div>
            </div>
        `;
        container.appendChild(newLiability);
        liabilityCount++;
        
        // Initialize Flatpickr on the newly added date input
        const dateInput = newLiability.querySelector('[data-flatpickr]');
        if (dateInput && window.flatpickr) {
            flatpickr(dateInput, {
                enableTime: false,
                dateFormat: 'Y-m-d',
                minDate: 'today'
            });
        }
        
        updateAssetDropdowns();
    }
    
    function toggleKycOtherDescription(index) {
        const selectElement = document.querySelector(`select[name="kyc_documents[${index}][type]"]`);
        const otherDescDiv = document.getElementById(`kyc_other_description_${index}`);
        if (selectElement && otherDescDiv) {
            if (selectElement.value === 'other') {
                otherDescDiv.style.display = 'block';
            } else {
                otherDescDiv.style.display = 'none';
            }
        }
    }
    
    function addKycDocument() {
        const container = document.getElementById('kyc-documents-container');
        const newDocument = document.createElement('div');
        newDocument.className = 'kyc-document-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200';
        newDocument.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="font-semibold text-gray-700">Document ${kycDocumentCount + 1}</h4>
                <button type="button" onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-file-alt text-indigo-600 mr-2 text-base"></i>
                        Document Type <span class="text-red-500">*</span>
                    </label>
                    <select name="kyc_documents[${kycDocumentCount}][type]" onchange="toggleKycOtherDescription(${kycDocumentCount})" required class="w-full pl-4 pr-10 py-4 border-2 border-gray-200 rounded-xl focus:border-indigo-500 outline-none appearance-none text-gray-900">
                        <option value="">Select document type</option>
                        <option value="ic_front">IC / Passport (Front)</option>
                        <option value="ic_back">IC / Passport (Back)</option>
                        <option value="driving_license">Driving License</option>
                        <option value="utility_bill">Utility Bill</option>
                        <option value="bank_statement">Bank Statement</option>
                        <option value="other">Other - Asset Type</option>
                    </select>
                </div>
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-upload text-indigo-600 mr-2 text-base"></i>
                        Upload File
                    </label>
                    <input type="file" name="kyc_documents[${kycDocumentCount}][file]" accept=".pdf,.jpg,.jpeg,.png" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-indigo-500 outline-none text-gray-900">
                </div>
            </div>
            <!-- Conditional field for "Other - Asset Type" -->
            <div class="group" id="kyc_other_description_${kycDocumentCount}" style="display: none;">
                <label class="flex items-center text-sm font-semibold text-gray-700 mb-3">
                    <i class="fas fa-pen text-indigo-600 mr-2 text-base"></i>
                    Please Specify Document Type
                </label>
                <textarea name="kyc_documents[${kycDocumentCount}][other_description]" placeholder="Describe the type of document (e.g., Insurance Certificate, Investment Report, etc.)" class="w-full pl-4 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100 outline-none transition-all duration-300 text-base bg-gray-50 hover:bg-white text-gray-900 resize-none" rows="2"></textarea>
            </div>
        `;
        container.appendChild(newDocument);
        kycDocumentCount++;
    }
    
    // Setup validation for family member fields
    function setupFamilyMemberValidation(memberElement) {
        // IC Number validation
        const icField = memberElement.querySelector('.family-ic');
        if (icField) {
            icField.addEventListener('input', function(e) {
                e.target.value = e.target.value.replace(/\D/g, '');
                if (e.target.value.length > 12) {
                    e.target.value = e.target.value.substring(0, 12);
                }
            });
            icField.addEventListener('blur', function(e) {
                validateFamilyIC(e.target);
            });
        }
        
        // Date of Birth validation and auto-fill IC
        const dobField = memberElement.querySelector('.family-dob');
        if (dobField && icField) {
            const handleDOBChange = function(e) {
                const dobValue = dobField.value;
                validateFamilyDOB(e.target);
                
                if (dobValue) {
                    // Extract date components from formatted date "17 JUN 1966"
                    const parts = dobValue.match(/(\d{2})\s([A-Z]{3})\s(\d{4})/);
                    if (parts) {
                        const day = parts[1];
                        const monthStr = parts[2];
                        const year = parts[3];
                        const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
                        const month = String(months.indexOf(monthStr) + 1).padStart(2, '0');
                        
                        if (year && month && day) {
                            // Get last 2 digits of year
                            const shortYear = year.slice(-2);
                            
                            // Auto-fill first 6 digits of IC number
                            const icPrefix = shortYear + month + day;
                            
                            // Keep any remaining digits user may have entered
                            const currentIcValue = icField.value || '';
                            const remainingDigits = currentIcValue.length > 6 ? currentIcValue.slice(6) : '';
                            
                            icField.value = icPrefix + remainingDigits;
                        }
                    }
                }
            };
            
            dobField.addEventListener('change', handleDOBChange);
            dobField.addEventListener('input', handleDOBChange);
        }
        
        // Phone validation
        const phoneField = memberElement.querySelector('.family-phone');
        if (phoneField) {
            phoneField.addEventListener('input', function(e) {
                e.target.value = e.target.value.replace(/[^0-9+\-\s]/g, '');
            });
        }
        
        // Email validation
        const emailField = memberElement.querySelector('.family-email');
        if (emailField) {
            emailField.addEventListener('blur', function(e) {
                if (e.target.value && !validateEmail(e.target)) {
                    e.target.classList.add('border-red-500');
                } else {
                    e.target.classList.remove('border-red-500');
                }
            });
        }
        
        // Address merge on change
        const addressFields = memberElement.querySelectorAll('.family-address-1, .family-address-2, .family-city, .family-state, .family-postal, .family-country');
        addressFields.forEach(field => {
            field.addEventListener('change', function() {
                mergeFamilyAddress(memberElement);
            });
            field.addEventListener('blur', function() {
                mergeFamilyAddress(memberElement);
            });
        });

        // Setup country/state/city dropdowns for family member
        setupFamilyAddressDropdowns(memberElement);
    }

    // Setup country/state/city dropdowns for family member address
    function setupFamilyAddressDropdowns(memberElement) {
        const countrySelect = memberElement.querySelector('.family-country');
        const stateSelect = memberElement.querySelector('.family-state');
        const citySelect = memberElement.querySelector('.family-city');

        if (!countrySelect || !stateSelect || !citySelect) return;

        // Handle country change
        countrySelect.addEventListener('change', function() {
            const selectedCountry = this.value;

            // Clear state and city dropdowns
            stateSelect.innerHTML = '<option value="">Select State</option>';
            citySelect.innerHTML = '<option value="">Select City</option>';

            if (selectedCountry === 'Malaysia') {
                // Populate Malaysia states
                const states = Object.keys(malaysiaStates);
                states.forEach(state => {
                    const option = document.createElement('option');
                    option.value = state;
                    option.textContent = state;
                    stateSelect.appendChild(option);
                });
            } else if (selectedCountry === 'Other') {
                // For other countries, allow text input
                stateSelect.innerHTML = '<option value="">Select State</option>';
                citySelect.innerHTML = '<option value="">Select City</option>';
            }
        });

        // Handle state change
        stateSelect.addEventListener('change', function() {
            const selectedState = this.value;
            const selectedCountry = countrySelect.value;

            // Clear city dropdown
            citySelect.innerHTML = '<option value="">Select City</option>';

            if (selectedCountry === 'Malaysia' && selectedState && malaysiaStates[selectedState]) {
                // Populate cities for selected state
                malaysiaStates[selectedState].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            }
        });

        // Initialize with Malaysia selected
        if (countrySelect.value === 'Malaysia') {
            // Trigger initial population
            countrySelect.dispatchEvent(new Event('change'));
        }
    }
    
    function validateFamilyIC(input) {
        const value = input.value.replace(/\D/g, '');
        if (value.length > 0 && value.length !== 12) {
            input.setCustomValidity('IC number must be exactly 12 digits');
            input.classList.add('border-red-500');
            return false;
        } else {
            input.setCustomValidity('');
            input.classList.remove('border-red-500');
            return true;
        }
    }
    
    function validateFamilyDOB(input) {
        const selectedDate = new Date(input.value);
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        if (input.value && selectedDate > today) {
            input.setCustomValidity('Date of birth cannot be in the future');
            input.classList.add('border-red-500');
            return false;
        } else {
            input.setCustomValidity('');
            input.classList.remove('border-red-500');
            return true;
        }
    }
    
    // Copy residential address to family member address
    function copyResidentialAddressToFamily(button) {
        // Get the closest family member card
        const familyCard = button.closest('.family-member-card');
        if (!familyCard) return;

        // Get client's residential address
        const clientAddr1 = document.querySelector('input[name="address_line_1"]')?.value || '';
        const clientAddr2 = document.querySelector('input[name="address_line_2"]')?.value || '';
        const clientCity = document.querySelector('select[name="city"]')?.value || '';
        const clientState = document.querySelector('select[name="state"]')?.value || '';
        const clientPostal = document.querySelector('input[name="postal_code"]')?.value || '';
        const clientCountry = document.querySelector('select[name="country"]')?.value || 'Malaysia';

        // Set family member address fields
        const familyAddr1 = familyCard.querySelector('.family-address-1');
        const familyAddr2 = familyCard.querySelector('.family-address-2');
        const familyCity = familyCard.querySelector('.family-city');
        const familyState = familyCard.querySelector('.family-state');
        const familyPostal = familyCard.querySelector('.family-postal');
        const familyCountry = familyCard.querySelector('.family-country');

        if (familyAddr1) familyAddr1.value = clientAddr1;
        if (familyAddr2) familyAddr2.value = clientAddr2;
        if (familyPostal) familyPostal.value = clientPostal;
        if (familyCountry) {
            familyCountry.value = clientCountry;
            // Trigger country change to populate states
            familyCountry.dispatchEvent(new Event('change', { bubbles: true }));
        }
        
        // Set state first, then trigger state change to populate cities
        if (familyState) {
            familyState.value = clientState;
            // Trigger state change event to populate cities
            familyState.dispatchEvent(new Event('change', { bubbles: true }));
        }
        
        // Now set city after cities are populated
        setTimeout(() => {
            if (familyCity) {
                familyCity.value = clientCity;
            }
            // Trigger address merge
            mergeFamilyAddress(familyCard);
        }, 150);
    }
    
    // Merge structured address into single address field
    function mergeFamilyAddress(memberElement) {
        const line1 = memberElement.querySelector('.family-address-1')?.value || '';
        const line2 = memberElement.querySelector('.family-address-2')?.value || '';
        const city = memberElement.querySelector('.family-city')?.value || '';
        const state = memberElement.querySelector('.family-state')?.value || '';
        const postal = memberElement.querySelector('.family-postal')?.value || '';
        const country = memberElement.querySelector('.family-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 hiddenField = memberElement.querySelector('.family-address-merged');
        if (hiddenField) {
            hiddenField.value = mergedAddress;
            console.log('📍 Address merged for family member:', {
                firstName: memberElement.querySelector('input[name*="[first_name]"]')?.value,
                lastName: memberElement.querySelector('input[name*="[last_name]"]')?.value,
                mergedAddress: mergedAddress,
                hiddenFieldName: hiddenField.name,
                hiddenFieldValue: hiddenField.value
            });
        }
        
        return mergedAddress;
    }
    
    // Validate all family members
    function validateFamilyMembers() {
        console.log('🔍 validateFamilyMembers() called');
        // Merge all family addresses before validation to ensure they are saved
        const members = document.querySelectorAll('.family-member-card');
        console.log('Found family members to validate:', members.length);
        members.forEach((member, idx) => {
            const firstName = member.querySelector('input[name*="[first_name]"]')?.value;
            console.log(`  Member ${idx}: ${firstName}`);
            mergeFamilyAddress(member);
        });
        
        let isValid = true;
        const membersAgain = document.querySelectorAll('.family-member-card');
        
        membersAgain.forEach((member, index) => {
            const icField = member.querySelector('.family-ic');
            const dobField = member.querySelector('.family-dob');
            const emailField = member.querySelector('.family-email');
            const firstName = member.querySelector('input[name*="[first_name]"]');
            
            // Validate required first name
            if (firstName && !firstName.value.trim()) {
                isValid = false;
                firstName.classList.add('border-red-500');
            } else if (firstName) {
                firstName.classList.remove('border-red-500');
            }
            
            // Validate IC if provided
            if (icField && icField.value && !validateFamilyIC(icField)) {
                isValid = false;
            }
            
            // Validate DOB if provided
            if (dobField && dobField.value && !validateFamilyDOB(dobField)) {
                isValid = false;
            }
            
            // Validate email if provided
            if (emailField && emailField.value && !validateEmail(emailField)) {
                isValid = false;
            }
            
            // Merge address before submission
            mergeFamilyAddress(member);
        });
        
        console.log('✅ Family member validation complete, isValid:', isValid);
        return isValid;
    }
    
    // Form submission with AJAX
    document.getElementById('clientForm').addEventListener('submit', function(e) {
        e.preventDefault();

        try {
            console.log('📋 Form submission started');
            // Merge all family addresses before validation
            document.querySelectorAll('.family-member-card').forEach(member => {
                mergeFamilyAddress(member);
            });

            // Validate entire form before submission
            if (!validateForm()) {
                // Validation failed - errors are already shown by validateForm
                console.log('❌ Form validation failed');
                return;
            }
        } catch (validationError) {
            console.error('Validation error:', validationError);
            const errorContainer = document.getElementById('error-container');
            const errorMessages = document.getElementById('error-messages');
            errorContainer.classList.remove('hidden');
            errorMessages.innerHTML = '<p class="font-semibold">A validation error occurred.</p><p class="text-sm mt-1">Please check the browser console (F12) for technical details or refresh the page and try again.</p>';
            errorContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }

        const submitBtn = e.target.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        // Show loading state
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Creating...';
        
        // Log FormData contents for debugging
        const formData = new FormData(e.target);
        console.log('📤 Submitting FormData with entries:');
        const familyMembersData = {};
        for (let pair of formData.entries()) {
            if (pair[0].includes('family_members')) {
                console.log(`  ${pair[0]}: ${pair[1]}`);
                familyMembersData[pair[0]] = pair[1];
            }
        }
        console.log('Family members data summary:', familyMembersData);
        
        // Check for KYC documents specifically
        const kycFiles = formData.getAll('kyc_documents[0][file]');
        console.log('KYC files found:', kycFiles.length);
        
        // Submit form via AJAX
        fetch(e.target.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => {
            // Always parse JSON, even for error status codes (422, 500, etc.)
            return response.json().then(data => {
                // Check if response was not OK (422 validation error, 500 server error, etc.)
                if (!response.ok) {
                    // For validation errors (422), data contains 'errors'
                    // For server errors (500), data contains 'message'
                    throw { status: response.status, data: data };
                }
                return data;
            });
        })
        .then(data => {
            if (data.success) {
                document.getElementById('success-container').classList.remove('hidden');
                setTimeout(() => {
                    window.location.href = data.redirect;
                }, 2000);
            } else {
                document.getElementById('error-container').classList.remove('hidden');
                const errorMessages = document.getElementById('error-messages');
                if (data.errors) {
                    errorMessages.innerHTML = '<ul class="list-disc ml-4">' + 
                        Object.values(data.errors).flat().map(err => '<li>' + err + '</li>').join('') + 
                        '</ul>';
                } else {
                    errorMessages.textContent = data.message || 'An error occurred while creating the client.';
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('error-container').classList.remove('hidden');
            const errorMessages = document.getElementById('error-messages');
            
            // Handle structured error (from our throw above)
            if (error.data) {
                if (error.data.errors) {
                    // Validation errors
                    errorMessages.innerHTML = '<p class="font-semibold mb-2">Please fix the following errors:</p><ul class="list-disc ml-4">' + 
                        Object.values(error.data.errors).flat().map(err => '<li>' + err + '</li>').join('') + 
                        '</ul>';
                } else if (error.data.message) {
                    errorMessages.textContent = error.data.message;
                } else {
                    errorMessages.textContent = 'Server error ' + error.status + '. Please try again.';
                }
            } else {
                // Network or parsing error
                errorMessages.innerHTML = '<p class="font-semibold">' + (error.message || 'Something went wrong') + '</p><p class="text-sm mt-1">Please check the browser console (F12) for more details or try again.</p>';
            }
            console.log('Full error details:', error);
        })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        });
    });
    
    // Validation Helper Functions
    function validateNameField(input) {
        const nameRegex = /^[a-zA-Z\s\-\'\.]+$/;
        const value = input.value;
        
        if (value && !nameRegex.test(value)) {
            input.setCustomValidity('Name may only contain letters, spaces, hyphens, apostrophes, and periods.');
            input.classList.add('border-red-500');
            return false;
        } else if (value && /[0-9]/.test(value)) {
            input.setCustomValidity('Name cannot contain numbers.');
            input.classList.add('border-red-500');
            return false;
        } else {
            input.setCustomValidity('');
            input.classList.remove('border-red-500');
            return true;
        }
    }
    
    function validatePhoneField(input) {
        const phoneRegex = /^[0-9+\-\s]+$/;
        const value = input.value;
        
        if (value && !phoneRegex.test(value)) {
            input.setCustomValidity('Phone number may only contain numbers, +, -, and spaces.');
            input.classList.add('border-red-500');
            return false;
        } else {
            input.setCustomValidity('');
            input.classList.remove('border-red-500');
            return true;
        }
    }
    
    function validateICNumber(input) {
        const identificationType = document.getElementById('identificationType');
        const idType = identificationType ? identificationType.value : 'ic';
        const value = input.value.trim();
        
        if (idType === 'ic') {
            // IC Number validation: exactly 12 digits
            const icRegex = /^[0-9]{12}$/;
            const digitsOnly = value.replace(/\D/g, '');
            
            if (value.length > 0 && digitsOnly.length !== 12) {
                input.setCustomValidity('IC number must be exactly 12 digits.');
                input.classList.add('border-red-500');
                return false;
            } else if (value.length > 0 && !icRegex.test(value)) {
                input.setCustomValidity('IC number must contain only digits.');
                input.classList.add('border-red-500');
                return false;
            } else {
                input.setCustomValidity('');
                input.classList.remove('border-red-500');
                return true;
            }
        } else if (idType === 'passport') {
            // Passport validation: alphanumeric, 6-20 characters
            const passportRegex = /^[A-Za-z0-9]{6,20}$/;
            
            if (value.length > 0 && value.length < 6) {
                input.setCustomValidity('Passport number must be at least 6 characters.');
                input.classList.add('border-red-500');
                return false;
            } else if (value.length > 0 && value.length > 20) {
                input.setCustomValidity('Passport number must not exceed 20 characters.');
                input.classList.add('border-red-500');
                return false;
            } else if (value.length > 0 && !passportRegex.test(value)) {
                input.setCustomValidity('Passport number must contain only letters and numbers.');
                input.classList.add('border-red-500');
                return false;
            } else {
                input.setCustomValidity('');
                input.classList.remove('border-red-500');
                return true;
            }
        } else {
            // Other ID type: generic validation
            if (value.length > 0 && value.length < 3) {
                input.setCustomValidity('ID number must be at least 3 characters.');
                input.classList.add('border-red-500');
                return false;
            } else if (value.length > 50) {
                input.setCustomValidity('ID number must not exceed 50 characters.');
                input.classList.add('border-red-500');
                return false;
            } else {
                input.setCustomValidity('');
                input.classList.remove('border-red-500');
                return true;
            }
        }
    }
    
    function validateDateOfBirth(input) {
        const selectedDate = new Date(input.value);
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        if (input.value && selectedDate > today) {
            input.setCustomValidity('Date of birth cannot be in the future.');
            input.classList.add('border-red-500');
            return false;
        } else {
            input.setCustomValidity('');
            input.classList.remove('border-red-500');
            return true;
        }
    }
    
    function validateEmail(input) {
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        const value = input.value.trim();
        
        if (value && !emailRegex.test(value)) {
            input.setCustomValidity('Please enter a valid email address (e.g., name@example.com).');
            input.classList.add('border-red-500');
            return false;
        } else {
            input.setCustomValidity('');
            input.classList.remove('border-red-500');
            return true;
        }
    }
    
    // Real-time validation setup
    function setupRealTimeValidation() {
        // Name fields validation
        const nameFields = [
            'input[name="first_name"]',
            'input[name="last_name"]',
            'input[name="emergency_contact_name"]',
            'input[name="spouse_name"]',
            'input[name="joint_person_name"]',
            'input[name="joint_spouse_name"]'
        ];
        
        nameFields.forEach(selector => {
            const input = document.querySelector(selector);
            if (input) {
                input.addEventListener('input', function(e) {
                    // Remove invalid characters as user types
                    e.target.value = e.target.value.replace(/[^a-zA-Z\s\-\'\.]/g, '');
                    validateNameField(e.target);
                });
                input.addEventListener('blur', function(e) {
                    validateNameField(e.target);
                });
            }
        });
        
        // Phone fields validation
        const phoneFields = [
            'input[name="phone"]',
            'input[name="alternative_phone"]',
            'input[name="emergency_contact_phone"]',
            'input[name="joint_person_phone"]'
        ];
        
        phoneFields.forEach(selector => {
            const input = document.querySelector(selector);
            if (input) {
                input.addEventListener('input', function(e) {
                    // Remove invalid characters as user types
                    e.target.value = e.target.value.replace(/[^0-9+\-\s]/g, '');
                    validatePhoneField(e.target);
                });
                input.addEventListener('blur', function(e) {
                    validatePhoneField(e.target);
                });
            }
        });
        
        // IC Number validation
        const icNumberField = document.querySelector('input[name="ic_number"]');
        const identificationType = document.getElementById('identificationType');
        
        if (icNumberField && identificationType) {
            icNumberField.addEventListener('input', function(e) {
                const idType = identificationType.value;
                
                if (idType === 'ic') {
                    // Remove non-digit characters for IC
                    e.target.value = e.target.value.replace(/\D/g, '');
                    
                    // Limit to 12 digits
                    if (e.target.value.length > 12) {
                        e.target.value = e.target.value.substring(0, 12);
                    }
                } else if (idType === 'passport') {
                    // Allow alphanumeric for passport
                    e.target.value = e.target.value.replace(/[^A-Za-z0-9]/g, '');
                    
                    // Limit to 20 characters
                    if (e.target.value.length > 20) {
                        e.target.value = e.target.value.substring(0, 20);
                    }
                } else {
                    // Allow alphanumeric for other
                    e.target.value = e.target.value.replace(/[^A-Za-z0-9]/g, '');
                    
                    // Limit to 50 characters
                    if (e.target.value.length > 50) {
                        e.target.value = e.target.value.substring(0, 50);
                    }
                }
                
                validateICNumber(e.target);
            });
            icNumberField.addEventListener('blur', function(e) {
                validateICNumber(e.target);
            });
            
            // Set initial maxlength based on default ID type
            icNumberField.setAttribute('maxlength', '12');
        }
        
        // Spouse IC Number validation (strictly 12 digits)
        const spouseICField = document.querySelector('input[name="spouse_ic_number"]');
        if (spouseICField) {
            spouseICField.addEventListener('input', function(e) {
                // Remove non-digit characters
                e.target.value = e.target.value.replace(/\D/g, '');
                
                // Limit to 12 digits
                if (e.target.value.length > 12) {
                    e.target.value = e.target.value.substring(0, 12);
                }
                
                validateICNumber(e.target);
            });
            spouseICField.addEventListener('blur', function(e) {
                validateICNumber(e.target);
            });
            spouseICField.setAttribute('maxlength', '12');
        }
        
        // Joint person IC validation (strictly 12 digits)
        const jointICField = document.querySelector('input[name="joint_person_ic_number"]');
        if (jointICField) {
            jointICField.addEventListener('input', function(e) {
                // Remove non-digit characters
                e.target.value = e.target.value.replace(/\D/g, '');
                
                // Limit to 12 digits
                if (e.target.value.length > 12) {
                    e.target.value = e.target.value.substring(0, 12);
                }
                
                validateICNumber(e.target);
            });
            jointICField.addEventListener('blur', function(e) {
                validateICNumber(e.target);
            });
            jointICField.setAttribute('maxlength', '12');
        }
        
        // Joint spouse IC Number validation (strictly 12 digits)
        const jointSpouseICField = document.querySelector('input[name="joint_spouse_ic_number"]');
        if (jointSpouseICField) {
            jointSpouseICField.addEventListener('input', function(e) {
                // Remove non-digit characters
                e.target.value = e.target.value.replace(/\D/g, '');
                
                // Limit to 12 digits
                if (e.target.value.length > 12) {
                    e.target.value = e.target.value.substring(0, 12);
                }
                
                validateICNumber(e.target);
            });
            jointSpouseICField.addEventListener('blur', function(e) {
                validateICNumber(e.target);
            });
            jointSpouseICField.setAttribute('maxlength', '12');
        }
        
        // Date of Birth validation
        const dobField = document.querySelector('input[name="date_of_birth"]');
        if (dobField) {
            // Set max date to today
            const today = new Date().toISOString().split('T')[0];
            dobField.setAttribute('max', today);
            
            dobField.addEventListener('change', function(e) {
                validateDateOfBirth(e.target);
            });
            dobField.addEventListener('blur', function(e) {
                validateDateOfBirth(e.target);
            });
        }
        
        // Email validation
        const emailFields = [
            'input[name="email"]',
            'input[name="emergency_email"]',
            'input[name="joint_person_email"]'
        ];
        
        emailFields.forEach(selector => {
            const input = document.querySelector(selector);
            if (input) {
                input.addEventListener('blur', function(e) {
                    validateEmail(e.target);
                });
                input.addEventListener('input', function(e) {
                    // Clear error when user starts typing
                    if (e.target.classList.contains('border-red-500')) {
                        validateEmail(e.target);
                    }
                });
            }
        });
    }
    
    // Collect all validation errors
    let validationErrors = [];

    function addError(fieldName, message, tabId) {
        validationErrors.push({ field: fieldName, message: message, tab: tabId });
    }

    function showValidationErrors() {
        const errorContainer = document.getElementById('error-container');
        const errorMessages = document.getElementById('error-messages');
        
        if (validationErrors.length > 0) {
            errorContainer.classList.remove('hidden');
            
            // Group errors by tab
            const errorsByTab = {};
            validationErrors.forEach(err => {
                const tabLabel = getTabLabel(err.tab);
                if (!errorsByTab[tabLabel]) errorsByTab[tabLabel] = [];
                errorsByTab[tabLabel].push(err.message);
            });
            
            let html = '<p class="font-semibold mb-3">Please fix the following errors:</p>';
            
            for (const [tabLabel, messages] of Object.entries(errorsByTab)) {
                html += `<div class="mb-3"><span class="font-semibold text-red-700">${tabLabel}:</span><ul class="list-disc ml-4 mt-1">`;
                messages.forEach(msg => {
                    html += `<li>${msg}</li>`;
                });
                html += '</ul></div>';
            }
            
            errorMessages.innerHTML = html;
            
            // Scroll to error container
            errorContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
            
            return true;
        }
        return false;
    }

    function getTabLabel(tabId) {
        const labels = {
            'personal': 'Personal Information',
            'contact': 'Contact Information',
            'emergency': 'Emergency Contact',
            'account': 'Account Settings',
            'family': 'Family Members',
            'assets': 'Assets',
            'liabilities': 'Debts/Liabilities',
            'kyc': 'KYC Documents'
        };
        return labels[tabId] || tabId;
    }

    function validateRequiredField(field, fieldName, tabId, customMessage) {
        if (!field || !field.value || field.value.trim() === '') {
            addError(fieldName, customMessage || `${fieldName} is required`, tabId);
            if (field) field.classList.add('border-red-500');
            return false;
        }
        if (field) field.classList.remove('border-red-500');
        return true;
    }

    // Form submission validation
    function validateForm() {
        validationErrors = []; // Reset errors
        let isValid = true;
        
        // ===== PERSONAL TAB VALIDATION =====
        // Validate name fields based on ID type
        const firstName = document.querySelector('input[name="first_name"]');
        const lastName = document.querySelector('input[name="last_name"]');
        const passportFullName = document.querySelector('input[name="passport_full_name"]');
        const idTypeSelect = document.querySelector('select[name="identification_type"]');
        const idType = idTypeSelect ? idTypeSelect.value : 'ic';
        
        // Conditional validation based on ID type
        if (idType === 'passport') {
            // For passport: only validate passport_full_name
            if (!validateRequiredField(passportFullName, 'Full Name (as per Passport)', 'personal')) isValid = false;
        } else if (idType === 'ic') {
            // For IC: validate first_name and last_name
            if (!validateRequiredField(firstName, 'First Name', 'personal')) isValid = false;
            else if (!validateNameField(firstName)) {
                addError('First Name', 'First name can only contain letters, spaces, hyphens, apostrophes, and periods', 'personal');
                isValid = false;
            }
            
            if (!validateRequiredField(lastName, 'Last Name', 'personal')) isValid = false;
            else if (!validateNameField(lastName)) {
                addError('Last Name', 'Last name can only contain letters, spaces, hyphens, apostrophes, and periods', 'personal');
                isValid = false;
            }
        }
        
        // Validate Identification Type (required)
        if (!validateRequiredField(idTypeSelect, 'Identification Type', 'personal')) isValid = false;
        
        // Validate ID Number (required) - based on ID type
        const icNumberField = document.querySelector('input[name="ic_number"]');
        
        if (!validateRequiredField(icNumberField, 'ID Number', 'personal', 'ID Number is required')) isValid = false;
        else {
            // Validate based on ID type
            if (idType === 'ic') {
                if (icNumberField.value.length !== 12) {
                    addError('ID Number', 'IC number must be exactly 12 digits', 'personal');
                    icNumberField.classList.add('border-red-500');
                    isValid = false;
                } else if (!/^[0-9]{12}$/.test(icNumberField.value)) {
                    addError('ID Number', 'IC number must contain only digits', 'personal');
                    icNumberField.classList.add('border-red-500');
                    isValid = false;
                } else {
                    icNumberField.classList.remove('border-red-500');
                }
            } else if (idType === 'passport') {
                if (icNumberField.value.length < 6) {
                    addError('ID Number', 'Passport number must be at least 6 characters', 'personal');
                    icNumberField.classList.add('border-red-500');
                    isValid = false;
                } else if (icNumberField.value.length > 20) {
                    addError('ID Number', 'Passport number must not exceed 20 characters', 'personal');
                    icNumberField.classList.add('border-red-500');
                    isValid = false;
                } else if (!/^[A-Za-z0-9]+$/.test(icNumberField.value)) {
                    addError('ID Number', 'Passport number must contain only letters and numbers', 'personal');
                    icNumberField.classList.add('border-red-500');
                    isValid = false;
                } else {
                    icNumberField.classList.remove('border-red-500');
                }
            } else {
                // Other ID type
                if (icNumberField.value.length < 3) {
                    addError('ID Number', 'ID number must be at least 3 characters', 'personal');
                    icNumberField.classList.add('border-red-500');
                    isValid = false;
                } else if (icNumberField.value.length > 50) {
                    addError('ID Number', 'ID number must not exceed 50 characters', 'personal');
                    icNumberField.classList.add('border-red-500');
                    isValid = false;
                } else {
                    icNumberField.classList.remove('border-red-500');
                }
            }
        }
        
        // Validate Address fields (required)
        const addressLine1 = document.getElementById('address_line_1');
        const city = document.getElementById('city');
        const state = document.getElementById('state');
        const postalCode = document.getElementById('postal_code');
        const country = document.getElementById('country');
        
        if (!validateRequiredField(addressLine1, 'Address Line 1', 'personal')) isValid = false;
        if (!validateRequiredField(city, 'City', 'personal')) isValid = false;
        if (!validateRequiredField(state, 'State/Province', 'personal')) isValid = false;
        if (!validateRequiredField(postalCode, 'Postal Code', 'personal')) isValid = false;
        if (!validateRequiredField(country, 'Country', 'personal')) isValid = false;
        
        // ===== CONTACT TAB VALIDATION =====
        // Validate Email
        const emailField = document.querySelector('input[name="email"]');
        if (!validateRequiredField(emailField, 'Email Address', 'contact')) isValid = false;
        else if (!validateEmail(emailField)) {
            addError('Email Address', 'Please enter a valid email address', 'contact');
            isValid = false;
        }
        
        // Validate Phone
        const phoneField = document.querySelector('input[name="phone"]');
        if (!validateRequiredField(phoneField, 'Phone Number', 'contact')) isValid = false;
        else if (!validatePhoneField(phoneField)) {
            addError('Phone Number', 'Phone number may only contain numbers, +, -, and spaces', 'contact');
            isValid = false;
        }
        
        
        // ===== EMERGENCY TAB VALIDATION =====
        // These fields are now optional - validation only if they exist in form
        const emergencyName = document.querySelector('input[name="emergency_contact_name"]');
        const emergencyPhone = document.querySelector('input[name="emergency_contact_phone"]');
        
        // Skip validation if fields don't exist (using new emergency contacts array instead)
        if (emergencyName && emergencyName.value !== undefined) {
            // Field exists but is optional - only validate if filled
        }
        if (emergencyPhone && emergencyPhone.value !== undefined) {
            // Field exists but is optional - only validate if filled
        }
        
        // ===== ACCOUNT TAB VALIDATION =====
        // Validate Marital Status
        const maritalStatus = document.getElementById('marital_status');
        if (!validateRequiredField(maritalStatus, 'Marital Status', 'account')) isValid = false;
        
        // Validate conditional spouse fields
        if (maritalStatus && maritalStatus.value === 'married') {
            const spouseName = document.querySelector('input[name="spouse_name"]');
            const spouseIC = document.querySelector('input[name="spouse_ic_number"]');
            
            if (spouseName && !spouseName.value.trim()) {
                addError('Spouse Name', 'Spouse name is required when married', 'account');
                spouseName.classList.add('border-red-500');
                isValid = false;
            }
            
            if (spouseIC && spouseIC.value && spouseIC.value.length !== 12) {
                addError('Spouse IC Number', 'Spouse IC number must be exactly 12 digits', 'account');
                spouseIC.classList.add('border-red-500');
                isValid = false;
            }
        }
        
        // Validate Joint Will fields if applicable
        const willType = document.getElementById('will_type_preference');
        if (willType && willType.value === 'joint') {
            const jointPersonName = document.querySelector('input[name="joint_person_name"]');
            const jointPersonIC = document.querySelector('input[name="joint_person_ic_number"]');
            
            if (!validateRequiredField(jointPersonName, 'Joint Person Name', 'account', 'Joint person name is required for joint will')) isValid = false;
            if (jointPersonIC && jointPersonIC.value && jointPersonIC.value.length !== 12) {
                addError('Joint Person IC Number', 'Joint person IC number must be exactly 12 digits', 'account');
                jointPersonIC.classList.add('border-red-500');
                isValid = false;
            }
        }
        
        // Validate Date of Birth
        const dobField = document.querySelector('input[name="date_of_birth"]');
        if (dobField && dobField.value && !validateDateOfBirth(dobField)) {
            addError('Date of Birth', 'Date of birth cannot be in the future', 'personal');
            isValid = false;
        }
        
        // Validate Alternative Phone if provided
        const altPhone = document.querySelector('input[name="alternative_phone"]');
        if (altPhone && altPhone.value && !validatePhoneField(altPhone)) {
            addError('Alternative Phone', 'Alternative phone may only contain numbers, +, -, and spaces', 'contact');
            isValid = false;
        }
        
        // Validate Emergency Email if provided
        const emergencyEmail = document.querySelector('input[name="emergency_email"]');
        if (emergencyEmail && emergencyEmail.value && !validateEmail(emergencyEmail)) {
            addError('Emergency Contact Email', 'Please enter a valid email address', 'emergency');
            isValid = false;
        }
        
        // Validate Family Members
        if (!validateFamilyMembers()) {
            isValid = false;
        }

        // Validate Asset Ownership Percentages
        const assetCards = document.querySelectorAll('.asset-card');
        assetCards.forEach((card, index) => {
            const isValidOwnership = validateAssetOwnership(index);
            if (!isValidOwnership) {
                isValid = false;
                const totalDisplay = document.getElementById(`total-ownership-${index}`);
                const total = totalDisplay ? totalDisplay.textContent : 'unknown';
                addError(`Asset ${index + 1}`, `Total ownership must be exactly 100% (currently ${total})`, 'assets');
            }
        });

        // Show all collected errors
        if (validationErrors.length > 0) {
            showValidationErrors();
        }

        return isValid;
    }
    
    // Marital status conditional fields
    document.addEventListener('DOMContentLoaded', function() {
        const maritalStatus = document.getElementById('marital_status');
        if (maritalStatus) {
            maritalStatus.addEventListener('change', function() {
                const status = this.value;
                const spouseNameContainer = document.getElementById('spouse_name_container');
                const spouseIcContainer = document.getElementById('spouse_ic_container');
                const spouseCountContainer = document.getElementById('spouse_count_container');
                const childrenCountContainer = document.getElementById('children_count_container');
                
                // Hide all conditional fields first
                if (spouseNameContainer) spouseNameContainer.style.display = 'none';
                if (spouseIcContainer) spouseIcContainer.style.display = 'none';
                if (spouseCountContainer) spouseCountContainer.style.display = 'none';
                if (childrenCountContainer) childrenCountContainer.style.display = 'none';
                
                // Show based on marital status
                if (status === 'married') {
                    if (spouseNameContainer) spouseNameContainer.style.display = 'block';
                    if (spouseIcContainer) spouseIcContainer.style.display = 'block';
                    if (spouseCountContainer) spouseCountContainer.style.display = 'block';
                    if (childrenCountContainer) childrenCountContainer.style.display = 'block';
                } else if (status === 'divorced' || status === 'widowed') {
                    if (childrenCountContainer) childrenCountContainer.style.display = 'block';
                }
            });
        }
        
        // Handle ID Type change
        const identificationType = document.getElementById('identificationType');
        const icNumberField = document.getElementById('icNumber');
        const idNumberHint = document.getElementById('idNumberHint');
        
        if (identificationType && icNumberField) {
            identificationType.addEventListener('change', function() {
                const idType = this.value;
                
                // Clear IC number field when type changes
                icNumberField.value = '';
                
                // Toggle field visibility based on ID type
                const icNameSection = document.getElementById('ic-name-section');
                const icLastnameSection = document.getElementById('ic-lastname-section');
                const icAlSection = document.getElementById('ic-al-section');
                const icApSection = document.getElementById('ic-ap-section');
                const passportFullnameSection = document.getElementById('passport-fullname-section');
                
                if (idType === 'ic') {
                    // Show IC fields
                    if (icNameSection) icNameSection.style.display = 'block';
                    if (icLastnameSection) icLastnameSection.style.display = 'block';
                    if (icAlSection) icAlSection.style.display = 'block';
                    if (icApSection) icApSection.style.display = 'block';
                    if (passportFullnameSection) passportFullnameSection.style.display = 'none';
                    
                    // Make IC name fields required
                    document.getElementById('firstName').required = true;
                    document.getElementById('lastName').required = true;
                    document.getElementById('passportFullName').required = false;
                    
                    icNumberField.setAttribute('maxlength', '12');
                    icNumberField.placeholder = 'YYMMDD + 6 digits (12 digits total)';
                    if (idNumberHint) {
                        idNumberHint.textContent = 'First 6 digits auto-filled from DOB. Enter remaining 6 digits.';
                    }
                } else if (idType === 'passport') {
                    // Show Passport fields, hide IC fields
                    if (icNameSection) icNameSection.style.display = 'none';
                    if (icLastnameSection) icLastnameSection.style.display = 'none';
                    if (icAlSection) icAlSection.style.display = 'none';
                    if (icApSection) icApSection.style.display = 'none';
                    if (passportFullnameSection) passportFullnameSection.style.display = 'block';
                    
                    // Passport: Make passport field required
                    // But keep first_name and last_name as hidden inputs (for validation to pass)
                    // They will be auto-populated from passport_full_name
                    document.getElementById('firstName').required = false;
                    document.getElementById('lastName').required = false;
                    document.getElementById('passportFullName').required = true;
                    
                    icNumberField.setAttribute('maxlength', '20');
                    icNumberField.placeholder = 'Enter passport number';
                    if (idNumberHint) {
                        idNumberHint.textContent = 'Passport number format varies by country.';
                    }
                } else {
                    // Show IC fields for 'Other' type as default
                    if (icNameSection) icNameSection.style.display = 'block';
                    if (icLastnameSection) icLastnameSection.style.display = 'block';
                    if (icAlSection) icAlSection.style.display = 'none';
                    if (icApSection) icApSection.style.display = 'none';
                    if (passportFullnameSection) passportFullnameSection.style.display = 'none';
                    
                    document.getElementById('firstName').required = true;
                    document.getElementById('lastName').required = true;
                    document.getElementById('passportFullName').required = false;
                    
                    icNumberField.setAttribute('maxlength', '50');
                    icNumberField.placeholder = 'Enter ID number';
                    if (idNumberHint) {
                        idNumberHint.textContent = 'Enter your identification number.';
                    }
                }
            });
            
            // Trigger initial state on page load
            identificationType.dispatchEvent(new Event('change'));
        }
        
        // Auto-split passport full name into first_name and last_name
        const passportFullNameField = document.getElementById('passportFullName');
        const firstNameField = document.getElementById('firstName');
        const lastNameField = document.getElementById('lastName');
        
        if (passportFullNameField && firstNameField && lastNameField) {
            passportFullNameField.addEventListener('input', function() {
                const fullName = this.value.trim();
                
                if (fullName) {
                    // Split full name into first and last name
                    const nameParts = fullName.split(/\s+/); // Split by whitespace
                    
                    if (nameParts.length >= 2) {
                        // First part is first name, last part is last name
                        firstNameField.value = nameParts[0];
                        lastNameField.value = nameParts[nameParts.length - 1];
                    } else if (nameParts.length === 1) {
                        // If only one name, use it as both first and last
                        firstNameField.value = nameParts[0];
                        lastNameField.value = nameParts[0];
                    }
                    
                    console.log('✅ Passport full name auto-split:', { 
                        fullName: fullName, 
                        firstName: firstNameField.value, 
                        lastName: lastNameField.value 
                    });
                } else {
                    // Clear when passport full name is cleared
                    firstNameField.value = '';
                    lastNameField.value = '';
                }
            });
        }
        
        // Auto-fill IC number from Date of Birth (YYMMDD format) - only for IC type
        const dateOfBirthInput = document.getElementById('dateOfBirth');
        
        if (dateOfBirthInput && icNumberField && identificationType) {
            // Handler function for both change and input events
            function handleDOBChange() {
                console.log('🎯 Date changed event fired:', dateOfBirthInput.value);
                const idType = identificationType.value;
                
                // Only auto-fill if ID type is IC
                if (idType === 'ic') {
                    const dobValue = dateOfBirthInput.value;
                    if (dobValue) {
                        console.log('📅 Processing DOB for IC type:', dobValue);
                        // HTML5 date input returns YYYY-MM-DD format
                        const dateParts = dobValue.split('-');
                        console.log('📊 Parsed parts:', dateParts);
                        if (dateParts.length === 3) {
                            const year = dateParts[0];
                            const month = dateParts[1];
                            const day = dateParts[2];
                            
                            console.log('🔢 Extracted: day=' + day + ', month=' + month + ', year=' + year);
                            
                            if (year && month && day) {
                                // Get last 2 digits of year
                                const shortYear = year.slice(-2);
                                
                                // Auto-fill first 6 digits of IC number
                                const icPrefix = shortYear + month + day;
                                console.log('✅ IC Prefix generated:', icPrefix);
                                
                                // Keep any remaining digits user may have entered
                                const currentIcValue = icNumberField.value || '';
                                const remainingDigits = currentIcValue.length > 6 ? currentIcValue.slice(6) : '';
                                
                                icNumberField.value = icPrefix + remainingDigits;
                                console.log('💾 IC Number updated to:', icNumberField.value);
                                
                                // Remove validation error if it was set
                                if (icNumberField.classList.contains('border-red-500')) {
                                    icNumberField.classList.remove('border-red-500', 'bg-red-50');
                                }
                            } else {
                                console.log('❌ Invalid year, month, or day');
                            }
                        } else {
                            console.log('❌ Expected 3 parts, got', dateParts.length);
                        }
                    }
                } else {
                    console.log('ℹ️ ID type is not IC, skipping auto-fill. Current type:', idType);
                }
            }
            
            // Attach to both change and input events for maximum compatibility
            dateOfBirthInput.addEventListener('change', handleDOBChange);
            dateOfBirthInput.addEventListener('input', handleDOBChange);
            
            console.log('✅ DOB auto-fill listener attached to dateOfBirth element');
        } else {
            console.log('❌ Date picker or IC field not found:', {
                dateOfBirthInput: dateOfBirthInput ? 'found' : 'NOT FOUND',
                icNumberField: icNumberField ? 'found' : 'NOT FOUND',
                identificationType: identificationType ? 'found' : 'NOT FOUND'
            });
        }
        
        // Auto-fill password with IC number
        const icNumberFieldForPassword = document.querySelector('input[name="ic_number"]');
        const passwordField = document.getElementById('password');
        if (icNumberFieldForPassword && passwordField) {
            icNumberFieldForPassword.addEventListener('input', function() {
                passwordField.value = this.value;
            });
            // Set initial value if IC is already filled
            if (icNumberFieldForPassword.value) {
                passwordField.value = icNumberFieldForPassword.value;
            }
        }
        
        // Setup real-time validation
        setupRealTimeValidation();

        // Setup country/state/city dropdowns
        setupCountryStateCityDropdowns();

        // Initialize ownership validation for existing assets
        document.querySelectorAll('.asset-card').forEach((card, index) => {
            const ownershipType = card.querySelector('select[name$="[ownership_type]"]')?.value || 'single';
            const ownershipInput = card.querySelector('input[name$="[ownership_percentage]"]');

            if (ownershipInput) {
                if (ownershipType === 'single') {
                    // For SOLE ownership, ALWAYS set to 100 and make readonly/disabled
                    ownershipInput.value = 100;
                    ownershipInput.readOnly = true;
                    ownershipInput.disabled = true;
                    ownershipInput.classList.add('bg-gray-100');
                    ownershipInput.classList.add('cursor-not-allowed');
                } else {
                    // Joint or tenancy - make editable
                    ownershipInput.readOnly = false;
                    ownershipInput.disabled = false;
                    ownershipInput.classList.remove('bg-gray-100');
                    ownershipInput.classList.remove('cursor-not-allowed');
                    // Don't auto-set value, let user decide
                }
            }
            // validateAssetOwnership(index); // Disabled to prevent automatic value changes
        });

        // Setup validation for any existing family members (auto-generated)
        document.querySelectorAll('.family-member-card').forEach(member => {
            setupFamilyMemberValidation(member);
        });
        
        // MutationObserver to handle dynamically added family members
        const familyContainer = document.getElementById('family-members-container');
        if (familyContainer) {
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.classList && node.classList.contains('family-member-card')) {
                            setupFamilyMemberValidation(node);
                        }
                    });
                });
            });
            observer.observe(familyContainer, { childList: true });
        }
        
        showTab('personal');
        updateAssetDropdowns();
        
        // Add event listeners for asset fields to update dropdowns when changed
        document.addEventListener('input', function(e) {
            if (e.target.name && (
                e.target.name.includes('[description]') || 
                e.target.name.includes('[location]') || 
                e.target.name.includes('[value]')
            )) {
                updateAssetDropdowns();
            }
        });
        
        document.addEventListener('change', function(e) {
            if (e.target.name && e.target.name.includes('[type]')) {
                updateAssetDropdowns();
            }
        });
        
        // Setup address merging for client address
        setupAddressMerging();
        setupJointAddressMerging();
    });
    
    // Merge client address fields into hidden address field
    function setupAddressMerging() {
        const addressFields = ['address_line_1', 'address_line_2', 'city', 'state', 'postal_code', 'country'];
        
        addressFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) {
                field.addEventListener('input', mergeClientAddress);
                field.addEventListener('change', mergeClientAddress);
                field.addEventListener('blur', mergeClientAddress);
            }
        });
        
        // Initial merge
        mergeClientAddress();
    }
    
    function mergeClientAddress() {
        const line1 = document.getElementById('address_line_1')?.value || '';
        const line2 = document.getElementById('address_line_2')?.value || '';
        const city = document.getElementById('city')?.value || '';
        const state = document.getElementById('state')?.value || '';
        const postal = document.getElementById('postal_code')?.value || '';
        const country = document.getElementById('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 hiddenField = document.getElementById('merged_address');
        if (hiddenField) {
            hiddenField.value = mergedAddress;
        }
    }

    // Merge joint person address fields into hidden address field
    function setupJointAddressMerging() {
        const container = document.querySelector('.joint-address-container');
        if (!container) return;

        const fields = container.querySelectorAll('input');
        const mergedField = container.querySelector('.joint-merged');

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

        mergeJointAddress();
    }

    
    function mergeJointAddress() {
        const line1 = document.querySelector('.joint-addr-1')?.value || '';
        const line2 = document.querySelector('.joint-addr-2')?.value || '';
        const city = document.querySelector('.joint-city')?.value || '';
        const state = document.querySelector('.joint-state')?.value || '';
        const postal = document.querySelector('.joint-postal')?.value || '';
        const country = document.querySelector('.joint-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('.joint-merged');
        if (mergedField) {
            mergedField.value = mergedAddress;
        }
    }

    // Copy client's personal address to joint person address fields
    function copyClientAddressToJoint() {
        // Get client's address fields
        const clientAddr1 = document.querySelector('input[name="address_line_1"]')?.value || '';
        const clientAddr2 = document.querySelector('input[name="address_line_2"]')?.value || '';
        const clientCity = document.querySelector('select[name="city"]')?.value || '';
        const clientState = document.querySelector('select[name="state"]')?.value || '';
        const clientPostal = document.querySelector('input[name="postal_code"]')?.value || '';
        const clientCountry = document.querySelector('select[name="country"]')?.value || 'Malaysia';

        // Set joint person address fields
        const jointAddr1 = document.querySelector('input[name="joint_person_address_line_1"]');
        const jointAddr2 = document.querySelector('input[name="joint_person_address_line_2"]');
        const jointCity = document.querySelector('input[name="joint_person_city"]');
        const jointState = document.querySelector('input[name="joint_person_state"]');
        const jointPostal = document.querySelector('input[name="joint_person_postal_code"]');
        const jointCountry = document.querySelector('input[name="joint_person_country"]');

        if (jointAddr1) jointAddr1.value = clientAddr1;
        if (jointAddr2) jointAddr2.value = clientAddr2;
        if (jointCity) jointCity.value = clientCity;
        if (jointState) jointState.value = clientState;
        if (jointPostal) jointPostal.value = clientPostal;
        if (jointCountry) jointCountry.value = clientCountry;

        // Trigger the merge function to update the merged address display
        mergeJointAddress();
    }

    // Emergency Contacts Functions
    let emergencyContactCount = 1;
    
    function addEmergencyContact() {
        const container = document.getElementById('emergency-contacts-container');
        const newIndex = emergencyContactCount;
        emergencyContactCount++;
        
        const newCard = document.createElement('div');
        newCard.className = 'emergency-contact-card bg-gray-50 rounded-xl p-6 border-2 border-gray-200 mb-4';
        newCard.innerHTML = `
            <div class="flex justify-between items-center mb-4">
                <h4 class="font-semibold text-gray-700">Emergency Contact ${newIndex + 1}</h4>
                <button type="button" onclick="removeEmergencyContact(this)" class="text-red-500 hover:text-red-700">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <!-- Contact Name -->
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-user text-orange-500 mr-2 text-base"></i>
                        Contact Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="emergency_contacts[${newIndex}][name]" required placeholder="Full name"
                           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 text-base">
                </div>
                
                <!-- Contact Phone -->
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-phone text-orange-500 mr-2 text-base"></i>
                        Contact Phone <span class="text-red-500">*</span>
                    </label>
                    <input type="tel" name="emergency_contacts[${newIndex}][phone]" required placeholder="Phone number"
                           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 text-base">
                </div>
                
                <!-- Relationship -->
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-heart text-orange-500 mr-2 text-base"></i>
                        Relationship <span class="text-red-500">*</span>
                    </label>
                    <select name="emergency_contacts[${newIndex}][relationship]" required onchange="toggleRelationshipOther(${newIndex})"
                            class="w-full pl-4 pr-10 py-3 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:ring-4 focus:ring-orange-100 outline-none appearance-none text-base">
                        <option value="">-- Select Relationship --</option>
                        <option value="Husband">Husband</option>
                        <option value="Wife">Wife</option>
                        <option value="Son">Son</option>
                        <option value="Daughter">Daughter</option>
                        <option value="Father">Father</option>
                        <option value="Mother">Mother</option>
                        <option value="Brother">Brother</option>
                        <option value="Sister">Sister</option>
                        <option value="Grandfather">Grandfather</option>
                        <option value="Grandmother">Grandmother</option>
                        <option value="Grandson">Grandson</option>
                        <option value="Granddaughter">Granddaughter</option>
                        <option value="Uncle">Uncle</option>
                        <option value="Aunt">Aunt</option>
                        <option value="Cousin">Cousin</option>
                        <option value="Nephew">Nephew</option>
                        <option value="Niece">Niece</option>
                        <option value="Friend">Friend</option>
                        <option value="Colleague">Colleague</option>
                        <option value="Neighbor">Neighbor</option>
                        <option value="Others">Others (Please specify)</option>
                    </select>
                </div>
                
                <!-- Contact Email -->
                <div class="group">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-envelope text-orange-500 mr-2 text-base"></i>
                        Contact Email
                    </label>
                    <input type="email" name="emergency_contacts[${newIndex}][email]" placeholder="Email address"
                           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 text-base">
                </div>
                
                <!-- Relationship Other (Conditional) -->
                <div class="group md:col-span-2" id="relationship_other_${newIndex}" style="display: none;">
                    <label class="flex items-center text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-pen text-orange-500 mr-2 text-base"></i>
                        Please Specify Relationship
                    </label>
                    <textarea name="emergency_contacts[${newIndex}][relationship_other]" placeholder="Describe the relationship" rows="2"
                              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 text-base"></textarea>
                </div>
            </div>
        `;
        
        container.appendChild(newCard);
    }
    
    function removeEmergencyContact(button) {
        const container = document.getElementById('emergency-contacts-container');
        const cards = container.querySelectorAll('.emergency-contact-card');
        
        // Don't allow removing if only 1 contact remains
        if (cards.length <= 1) {
            alert('At least one emergency contact is required');
            return;
        }
        
        button.closest('.emergency-contact-card').remove();
    }
    
    function toggleRelationshipOther(index) {
        const select = document.querySelector(`select[name="emergency_contacts[${index}][relationship]"]`);
        const otherDiv = document.getElementById(`relationship_other_${index}`);
        
        if (select && otherDiv) {
            if (select.value === 'Others') {
                otherDiv.style.display = 'block';
            } else {
                otherDiv.style.display = 'none';
            }
        }
    }
    </script>
@endsection