@extends('layouts.portal')

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

@section('sidebar')
    @if(isset($isClientEdit) && $isClientEdit)
        @include('client.partials.sidebar', ['active' => 'profile'])
    @else
        @include('agent.partials.sidebar', ['active' => 'wills'])
    @endif
@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>

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

        <div class="w-full relative z-10">
            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                <div class="flex items-center gap-5">
                    <div class="w-16 h-16 bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-xl flex items-center justify-center shadow-lg">
                        <i class="fas fa-home text-white text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-semibold text-white tracking-wide" style="font-family: 'Inter', sans-serif;">Assets</h1>
                        <p class="text-white/80 mt-1" style="font-family: 'Inter', sans-serif;">Step 4 of 10 - Asset Informations</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="text-right">
                        <p class="text-sm text-white/70" style="font-family: 'Inter', sans-serif;">Progress</p>
                        <p class="text-lg font-bold text-white" style="font-family: 'Inter', sans-serif;">4/10</p>
                    </div>
                    <div class="w-32 bg-[#772B10]/50 h-2 rounded-full overflow-hidden">
                        <div class="bg-white h-2" style="width: 40%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Breadcrumb with Top Space -->
    <!-- Breadcrumb with Top Space -->
    <div class="w-full px-8 mb-6 pt-8">
        <div class="flex items-center text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">
            @if(isset($isClientEdit) && $isClientEdit)
                <a href="{{ route('client.dashboard') }}" class="hover:text-gray-900">Dashboard</a>
                <i class="fas fa-chevron-right mx-2 text-xs"></i>
                <a href="{{ route('client.personal.details') }}" class="hover:text-gray-900">Personal Details</a>
                <i class="fas fa-chevron-right mx-2 text-xs"></i>
                <span class="text-gray-900">Edit Assets</span>
            @else
                <a href="{{ route('agent.clients.index') }}" class="hover:text-gray-900">Clients</a>
                <i class="fas fa-chevron-right mx-2 text-xs"></i>
                <a href="{{ route('agent.clients.show', $client) }}" class="hover:text-gray-900">{{ $client->full_name }}</a>
                <i class="fas fa-chevron-right mx-2 text-xs"></i>
                <span class="text-gray-900">Assets</span>
            @endif
        </div>
    </div>

    <!-- Will Type Information Banner -->
    <div class="mx-8 mb-6 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-lg">
        <div class="flex items-start gap-3">
            <div class="flex-shrink-0 mt-0.5">
                <i class="fas fa-info-circle text-blue-600 text-lg"></i>
            </div>
            <div>
                <!-- <h4 class="text-sm font-semibold text-blue-900">{{ $will->is_joint ? 'Joint Will' : 'Individual Will' }}</h4>
                <p class="text-sm text-blue-700 mt-1">
                    @if($will->is_joint)
                        <strong>For Joint Wills:</strong> Each testator can allocate up to 50% of their portion per asset. This means beneficiaries can receive a maximum of 50% allocation per asset from this testator.
                    @else
                        <strong>For Individual Wills:</strong> You can allocate the entire asset (100%) to beneficiaries. All assets combined for a beneficiary should equal 100%.
                    @endif
                </p> -->
            </div>
        </div>
    </div>

    <!-- Combined Assets Form -->
    <form action="@if(isset($isClientEdit) && $isClientEdit){{ route('client.will.edit.assets.store', $will->id) }}@else{{ route('agent.wills.assets.store', $will->id) }}@endif" method="POST" enctype="multipart/form-data" class="bg-white rounded-xl shadow-lg border border-gray-100 p-8" id="assetsForm">
        @csrf
        
        <!-- Spacer between sections -->
        <div class="mb-8"></div>

        

        <!-- Add Will Assets with Categories -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-red-200 rounded-xl flex items-center justify-center">
                        <i class="fas fa-plus text-white text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-gray-700" style="font-family: 'Inter', sans-serif;">Add Will Assets</h3>
                        <p class="text-gray-600 text-lg" style="font-family: 'Inter', sans-serif;">Select assets for this will with beneficiary allocation</p>
                    </div>
                </div>
                <button type="button" onclick="addNewAssetAllocation()" class="px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl hover:from-green-700 hover:to-green-800 transition-all duration-300 font-medium shadow-lg">
                    <i class="fas fa-plus mr-2"></i>Add Asset
                </button>
                <input type="hidden" name="will_id" value="{{ $will->id }}">
            </div>

            <!-- Asset Allocation Container -->
            <div class="space-y-6" id="assetAllocations">
                <!-- Asset allocations will be dynamically loaded here -->
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex flex-col md:flex-row gap-4 justify-between">
            @if(in_array($will->will_type, ['islamic', 'islamic_will']))
                <a href="{{ route('agent.islamic.wasi', $will) }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Wasi
                </a>
            @else
                <a href="{{ route('agent.wills.beneficiaries', $will) }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Beneficiaries
                </a>
            @endif
            <div class="flex gap-3">
                <a href="{{ route('agent.wills.liabilities', $will) }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium">
                    Skip to Liabilities
                </a>
                <button type="submit" class="px-6 py-3 bg-gradient-to-r from-[#772B10] to-[#8B3D15] text-white rounded-xl hover:from-[#8B3D15] hover:to-[#9F4F1A] transition-colors font-medium shadow-lg hover:shadow-xl transition-all">
                    <i class="fas fa-save mr-2"></i>Save & Continue to Liabilities
                </button>
            </div>
        </div>
    </form>

    <script>
        // User assets data from database
        let userAssets = [];
        let beneficiaries = [];
        let familyMembers = [];
        let willAssets = [];
        
        // Will type and allocation settings
        const willData = {
            is_joint: @json($will->is_joint ?? false),
            will_type: @json($will->will_type ?? 'individual')
        };
        
        // Determine max allocation percentage based on will type
        const MAX_ALLOCATION_PERCENTAGE = willData.is_joint ? 50 : 100;
        const WILL_TYPE_LABEL = willData.is_joint ? 'Joint Will (50% per testator)' : 'Individual Will (100%)';
        
        try {
            userAssets = @json($clientAssets ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
            beneficiaries = @json($will->beneficiaries ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
            familyMembers = @json($client->familyMembers ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
            willAssets = @json($savedAssets ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
        } catch (e) {
            console.error('Error parsing JSON data:', e);
        }
        
       
        let selectedAssets = new Set();
        
        // Main categories with their corresponding asset types
        const assetCategories = {
            'movable_assets': ['Jewelry', 'Electronics', 'Furniture', 'Art', 'Collectibles'],
            'non_movable_assets': ['House', 'Apartment', 'Land', 'Commercial Property', 'Condominium'],
            'digital_assets': ['Cryptocurrency', 'Digital Art', 'Domain Names', 'Software', 'Online Accounts'],
            'monies_and_accounts': ['Savings Account', 'Current Account', 'Fixed Deposit', 'Joint Account', 'Investment Account'],
            'personal_assets': ['Clothing', 'Books', 'Personal Documents', 'Photos', 'Memorabilia'],
            'car_and_automobiles': ['Car', 'Motorcycle', 'Truck', 'Boat', 'Aircraft'],
            'other_assets': ['Business Assets', 'Intellectual Property', 'Goodwill', 'Other']
        };

        
        let allocationCounter = 1;
        
       
        let assetBeneficiaries = {};

        // Initialize the page
        document.addEventListener('DOMContentLoaded', function() {
            console.log('=== ASSETS PAGE INITIALIZING ===');
            console.log('DEBUG: willAssets data:', willAssets);
            console.log('DEBUG: willAssets.length:', willAssets ? willAssets.length : 0);
            console.log('DEBUG: userAssets data:', userAssets);
            console.log('DEBUG: userAssets.length:', userAssets ? userAssets.length : 0);
            
            // Ensure arrays exist
            if (!Array.isArray(willAssets)) willAssets = [];
            if (!Array.isArray(userAssets)) userAssets = [];
            
            console.log('DEBUG: After normalization - willAssets:', willAssets);
            console.log('DEBUG: After normalization - userAssets:', userAssets);
            
            // Load existing will assets
            console.log('DEBUG: Calling loadExistingWillAssets()');
            loadExistingWillAssets();
        });

        // Load existing will assets and display them
        function loadExistingWillAssets() {
            console.log('=== loadExistingWillAssets() CALLED ===');
            const container = document.getElementById('assetAllocations');
            console.log('DEBUG: Container found:', container ? 'YES' : 'NO');
            console.log('DEBUG: willAssets.length:', willAssets.length);
            console.log('DEBUG: userAssets.length:', userAssets.length);
            
            // Clear existing content
            container.innerHTML = '';
            
            if (willAssets.length > 0) {
                // Case 1: Load saved will assets from database
                console.log('DEBUG: Loading', willAssets.length, 'saved will assets');
                willAssets.forEach((asset, index) => {
                    console.log('DEBUG: Creating asset', index + 1, 'from will data:', asset);
                    createAssetAllocationFromData(asset, index);
                    allocationCounter = index + 1;
                });
            } else if (userAssets.length > 0) {
                // Case 2: No saved will assets, but user has assets in database
                // Create asset forms for each user asset with data pre-filled
                console.log('DEBUG: No saved will assets, creating forms for', userAssets.length, 'user assets');
                userAssets.forEach((userAsset, index) => {
                    console.log('DEBUG: Creating asset form', index + 1, 'for user asset:', userAsset);
                    createAssetAllocationFromUserAsset(userAsset, index);
                    allocationCounter = index + 1;
                });
            } else {
                // Case 3: No saved will assets and no user assets - create one empty form
                console.log('DEBUG: No saved assets and no user assets - creating empty Asset 1');
                createEmptyAssetAllocation(0);
            }
        }

        // Create asset allocation from existing data
        function createAssetAllocationFromData(asset, index) {
            console.log('=== createAssetAllocationFromData() CALLED ===');
            console.log('DEBUG: asset data received:', asset);
            console.log('DEBUG: index received:', index);
            const container = document.getElementById('assetAllocations');
            
            // Flag to track if we loaded beneficiaries
            let beneficiariesLoaded = false;
            
            const allocationDiv = document.createElement('div');
            allocationDiv.className = 'bg-gradient-to-br from-white to-gray-50 border-2 border-gray-200 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 asset-allocation relative overflow-hidden';
            allocationDiv.setAttribute('data-allocation', index);
            
            // Add decorative bubbles
            allocationDiv.innerHTML += `
                <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-red-100 to-red-200 rounded-full -mr-16 -mt-16 opacity-30"></div>
                <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-br from-red-50 to-red-100 rounded-full -ml-12 -mb-12 opacity-20"></div>
            `;
            
            allocationDiv.innerHTML += `
                <div class="relative z-10">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                ${index + 1}
                            </div>
                            <div>
                                <h4 class="text-xl font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Asset ${index + 1}</h4>
                                <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Asset allocation details</p>
                                <div class="flex items-center gap-2 mt-2 flex-wrap">
                                    <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full ${willData.is_joint ? 'bg-purple-100 text-purple-700' : 'bg-green-100 text-green-700'}">
                                        ${willData.is_joint ? '🔗 Joint Will' : '👤 Individual Will'}
                                    </span>
                                    <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-700">
                                        Max: ${MAX_ALLOCATION_PERCENTAGE}% per beneficiary
                                    </span>
                                </div>
                            </div>
                        </div>
                        <button type="button" onclick="removeAssetAllocation(this)" class="px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors font-medium text-sm shadow-lg">
                            <i class="fas fa-trash mr-1"></i>Remove
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <!-- Main Category (Optional) -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-folder text-red-600 mr-2"></i>Category (Main)
                            </label>
                            <select name="asset_allocations[${index}][main_category]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="" class="text-black">Select Main Category (Optional)</option>
                                <option value="movable_assets" class="text-black" ${asset.main_category === 'movable_assets' ? 'selected' : ''}>Movable Assets</option>
                                <option value="non_movable_assets" class="text-black" ${asset.main_category === 'non_movable_assets' ? 'selected' : ''}>Non Movable Assets</option>
                                <option value="digital_assets" class="text-black" ${asset.main_category === 'digital_assets' ? 'selected' : ''}>Digital Assets</option>
                                <option value="monies_and_accounts" class="text-black" ${asset.main_category === 'monies_and_accounts' ? 'selected' : ''}>Monies and Accounts</option>
                                <option value="personal_assets" class="text-black" ${asset.main_category === 'personal_assets' ? 'selected' : ''}>Personal Assets</option>
                                <option value="car_and_automobiles" class="text-black" ${asset.main_category === 'car_and_automobiles' ? 'selected' : ''}>Car and Automobiles</option>
                                <option value="other_assets" class="text-black" ${asset.main_category === 'other_assets' ? 'selected' : ''}>Other Assets</option>
                            </select>
                        </div>

                        <!-- Sub Category (User Assets) -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-folder-open text-red-600 mr-2"></i>Select Asset <span class="text-red-500">*</span>
                            </label>
                            <select name="asset_allocations[${index}][sub_category]" onchange="updateAssetsList(${index})" required
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="" class="text-black">Select Asset</option>
                            </select>
                        </div>

                        <!-- Document/Title -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-file-alt text-red-600 mr-2"></i>Document/Title <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="asset_allocations[${index}][document_title]" required
                                   value="${asset.type || ''}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Document title or reference">
                        </div>

                        <!-- Address/Location -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-map-marker-alt text-red-600 mr-2"></i>Address/Location
                            </label>
                            <input type="text" name="asset_allocations[${index}][address]"
                                   value="${asset.location || ''}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Asset location or address">
                        </div>

                        <!-- Description -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-info-circle text-red-600 mr-2"></i>Description
                            </label>
                            <textarea name="asset_allocations[${index}][description]" rows="3"
                                      class="w-full px-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 resize-none bg-white text-black hover:bg-gray-50"
                                      placeholder="Asset description">${asset.description || ''}</textarea>
                        </div>

                        <!-- Asset Value -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-dollar-sign text-red-600 mr-2"></i>Asset Value (RM)
                            </label>
                            <input type="number" name="asset_allocations[${index}][value]" step="0.01"
                                   value="${asset.value || ''}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                        </div>

                        <!-- Monthly Income -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-chart-line text-red-600 mr-2"></i>Monthly Income
                            </label>
                            <input type="number" name="asset_allocations[${index}][monthly_income]" step="0.01"
                                   value="${asset.monthly_income || ''}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                            <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="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-tag text-red-600 mr-2"></i>Income Source Type
                            </label>
                            <select name="asset_allocations[${index}][income_type]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="">Select Income Type</option>
                                <option value="rent" ${asset.income_type === 'rent' ? 'selected' : ''}>Rental Income</option>
                                <option value="interest" ${asset.income_type === 'interest' ? 'selected' : ''}>Interest/Dividends</option>
                                <option value="business" ${asset.income_type === 'business' ? 'selected' : ''}>Business Income</option>
                                <option value="farm" ${asset.income_type === 'farm' ? 'selected' : ''}>Agricultural Income</option>
                                <option value="other" ${asset.income_type === 'other' ? 'selected' : ''}>Other Income</option>
                            </select>
                        </div>

                        <!-- Income Description -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-sticky-note text-red-600 mr-2"></i>Income Description
                            </label>
                            <input type="text" name="asset_allocations[${index}][income_description]"
                                   value="${asset.income_description || ''}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Describe the income source">
                        </div>

                        <!-- Ownership Type -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-handshake text-red-600 mr-2"></i>Ownership Type
                            </label>
                            <select name="asset_allocations[${index}][ownership_type]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="single" ${asset.ownership_type === 'single' ? 'selected' : ''}>Single Ownership</option>
                                <option value="joint" ${asset.ownership_type === 'joint' ? 'selected' : ''}>Joint Ownership</option>
                                <option value="tenancy" ${asset.ownership_type === 'tenancy' ? 'selected' : ''}>Tenancy</option>
                                <option value="trust" ${asset.ownership_type === 'trust' ? 'selected' : ''}>Trust</option>
                            </select>
                        </div>

                        <!-- Ownership Percentage -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-percent text-red-600 mr-2"></i>Ownership Percentage
                            </label>
                            <input type="number" name="asset_allocations[${index}][ownership_percentage]" step="0.01" min="0" max="100"
                                   value="${asset.ownership_percentage || 100}"
                                   onchange="updateMaxAllocationLabel(${index})"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                            <div class="text-xs text-gray-500 mt-1">Percentage of asset owned by testator (0-100%)</div>
                        </div>

                        <!-- Co-Owners -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-users text-red-600 mr-2"></i>Co-Owners Details
                            </label>
                            <textarea name="asset_allocations[${index}][co_owners]" rows="2"
                                      class="w-full px-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 resize-none bg-white text-black hover:bg-gray-50"
                                      placeholder="List co-owners and their details if applicable">${asset.co_owners || ''}</textarea>
                        </div>
                    </div>

                    <!-- Beneficiary Allocation -->
                    <div class="border-t-2 border-gray-200 pt-6">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white shadow-lg">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div>
                                    <h5 class="text-lg font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Beneficiary Allocation</h5>
                                    <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Add beneficiaries for this asset</p>
                                </div>
                            </div>
                            <button type="button" onclick="addBeneficiaryToAsset(${index})" 
                                    class="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-300 font-medium text-sm shadow-lg">
                                <i class="fas fa-plus mr-2"></i>Add Beneficiary
                            </button>
                        </div>
                        
                        <div class="space-y-4" id="beneficiaryAllocations${index}">
                            <!-- Load existing beneficiaries -->
                            ${asset.beneficiaries && asset.beneficiaries.length > 0 ? asset.beneficiaries.map((beneficiary, beneficiaryIndex) => {
                                console.log('DEBUG: Loading beneficiary', beneficiaryIndex, 'data:', beneficiary);
                                return createBeneficiaryHTML(index, beneficiaryIndex, beneficiary);
                            }).join('') : ''}
                        </div>
                        
                        <div class="mt-6 flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                            <div class="flex items-center gap-3">
                                <div class="text-sm font-medium text-gray-700">Total Allocation:</div>
                                <div id="totalPercentage${index}" class="text-lg font-bold text-red-600">0%</div>
                            </div>
                            <div class="text-xs text-gray-500 bg-white px-3 py-1 rounded-full">
                                <span id="maxAllocationLabel${index}">Max: ${(MAX_ALLOCATION_PERCENTAGE / 100 * (asset.ownership_percentage || 100)).toFixed(0)}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(allocationDiv);
            
            // Initialize beneficiaries array with selected values
            assetBeneficiaries[index] = asset.beneficiaries ? asset.beneficiaries.map(b => ({ ...b, selected: `${b.beneficiary_type}_${b.beneficiary_id}` })) : [];
            
            // Initialize the asset dropdown
            console.log('DEBUG: asset.asset_id:', asset.asset_id);
            console.log('DEBUG: asset.sub_category:', asset.sub_category);
            console.log('DEBUG: asset.type:', asset.type);
            console.log('DEBUG: asset.description:', asset.description);
            console.log('DEBUG: asset.address:', asset.address);
            updateSubCategories(index);
            
            // Set the selected asset if it exists
            // Handle both new format (asset_id) and legacy format (try to match by description)
            let assetId = asset.asset_id || asset.sub_category;
            
            if (!assetId && asset.description) {
                // Fallback: if no asset_id, try to match by description since old data doesn't have asset_id
                console.log('DEBUG: No asset_id found, attempting to match by description');
                const matchedAsset = userAssets.find(ua => {
                    return ua.description && ua.description.toLowerCase() === asset.description.toLowerCase();
                });
                
                if (matchedAsset) {
                    assetId = matchedAsset.id;
                    console.log('DEBUG: Matched asset by description:', matchedAsset.id, matchedAsset.description);
                }
            }
            
            if (assetId) {
                setTimeout(() => {
                    const subCategorySelect = document.querySelector(`select[name="asset_allocations[${index}][sub_category]"]`);
                    if (subCategorySelect) {
                        console.log('DEBUG: Attempting to set dropdown value to:', assetId);
                        console.log('DEBUG: Available options in dropdown:');
                        Array.from(subCategorySelect.options).forEach(opt => {
                            console.log('  - option value:', opt.value, 'text:', opt.text);
                        });
                        
                        subCategorySelect.value = assetId;
                        
                        console.log('DEBUG: Dropdown value after setting:', subCategorySelect.value);
                        console.log('DEBUG: Match result:', subCategorySelect.value === String(assetId));
                        
                        subCategorySelect.setAttribute('data-previous-asset', assetId);
                        updateAssetsList(index);
                    }
                }, 100);
            } else {
                console.log('DEBUG: Could not determine assetId for matching');
            }
            
            // Update percentage calculation with delay to ensure DOM is ready
            setTimeout(() => {
                // Populate beneficiary selects for existing beneficiaries
                console.log('DEBUG: Checking asset.beneficiaries:', asset.beneficiaries);
                if (asset.beneficiaries && asset.beneficiaries.length > 0) {
                    console.log('DEBUG: Found', asset.beneficiaries.length, 'beneficiaries to load');
                    asset.beneficiaries.forEach((beneficiary, beneficiaryIndex) => {
                        console.log('DEBUG: Populating beneficiary', beneficiaryIndex, ':', beneficiary);
                        populateAssetBeneficiaries(index, beneficiaryIndex);
                        // Set the selected value
                        const selectField = document.getElementById(`beneficiarySelect${index}_${beneficiaryIndex}`);
                        if (selectField && beneficiary.beneficiary_type && beneficiary.beneficiary_id) {
                            selectField.value = `${beneficiary.beneficiary_type}_${beneficiary.beneficiary_id}`;
                        }
                        
                        // Populate visible fields
                        const nameField = document.getElementById(`selectedBeneficiaryName${index}_${beneficiaryIndex}`);
                        const icField = document.getElementById(`selectedBeneficiaryIC${index}_${beneficiaryIndex}`);
                        const emailField = document.getElementById(`selectedBeneficiaryEmail${index}_${beneficiaryIndex}`);
                        const phoneField = document.getElementById(`selectedBeneficiaryPhone${index}_${beneficiaryIndex}`);
                        const addressField = document.getElementById(`selectedBeneficiaryAddress${index}_${beneficiaryIndex}`);
                        const relationshipField = document.getElementById(`selectedBeneficiaryRelationship${index}_${beneficiaryIndex}`);
                        
                        if (nameField) nameField.value = beneficiary.full_name || '';
                        if (icField) icField.value = beneficiary.ic_number || '';
                        if (emailField) emailField.value = beneficiary.email || '';
                        if (phoneField) phoneField.value = beneficiary.phone || '';
                        if (addressField) addressField.value = beneficiary.address || '';
                        if (relationshipField) relationshipField.value = beneficiary.relationship || '';
                        
                        // Show details container
                        const detailsContainer = document.getElementById(`selectedBeneficiaryDetails${index}_${beneficiaryIndex}`);
                        if (detailsContainer) {
                            detailsContainer.classList.remove('hidden');
                        }
                    });
                    
                    // IMPORTANT: Call updatePercentage AFTER beneficiaries are loaded
                    console.log('DEBUG: Calling updatePercentage for allocation', index, 'after loading', asset.beneficiaries.length, 'beneficiaries');
                    updatePercentage(index);
                }
            }, 200);
        }

        // Create asset allocation from user's database asset (pre-fill form with asset data)
        function createAssetAllocationFromUserAsset(userAsset, index) {
            console.log('=== createAssetAllocationFromUserAsset() CALLED ===');
            console.log('DEBUG: userAsset data received:', userAsset);
            console.log('DEBUG: index received:', index);
            const container = document.getElementById('assetAllocations');
            
            // Determine category from asset type
            const assetCategory = categorizeAsset(userAsset.type || '');
            
            const allocationDiv = document.createElement('div');
            allocationDiv.className = 'bg-gradient-to-br from-white to-gray-50 border-2 border-gray-200 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 asset-allocation relative overflow-hidden';
            allocationDiv.setAttribute('data-allocation', index);
            
            // Add decorative bubbles
            allocationDiv.innerHTML += `
                <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-red-100 to-red-200 rounded-full -mr-16 -mt-16 opacity-30"></div>
                <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-br from-red-50 to-red-100 rounded-full -ml-12 -mb-12 opacity-20"></div>
            `;
            
            const assetName = userAsset.name || userAsset.title || userAsset.type || 'Unnamed Asset';
            const assetLocation = userAsset.location || userAsset.address || '';
            const assetDescription = userAsset.description || '';
            const assetValue = userAsset.value || '';
            const monthlyIncome = userAsset.monthly_income || '';
            const incomeType = userAsset.income_type || '';
            const incomeDesc = userAsset.income_description || '';
            const ownershipType = userAsset.ownership_type || 'single';
            const ownershipPercentage = userAsset.ownership_percentage || 100;
            const coOwners = userAsset.co_owners || '';
            
            allocationDiv.innerHTML += `
                <div class="relative z-10">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                ${index + 1}
                            </div>
                            <div>
                                <h4 class="text-xl font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Asset ${index + 1}</h4>
                                <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Asset allocation details</p>
                                <div class="flex items-center gap-2 mt-2 flex-wrap">
                                    <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full ${willData.is_joint ? 'bg-purple-100 text-purple-700' : 'bg-green-100 text-green-700'}">
                                        ${willData.is_joint ? '🔗 Joint Will' : '👤 Individual Will'}
                                    </span>
                                    <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-700">
                                        Max: ${MAX_ALLOCATION_PERCENTAGE}% per beneficiary
                                    </span>
                                </div>
                            </div>
                        </div>
                        <button type="button" onclick="removeAssetAllocation(this)" class="px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors font-medium text-sm shadow-lg">
                            <i class="fas fa-trash mr-1"></i>Remove
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <!-- Main Category (Optional) -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-folder text-red-600 mr-2"></i>Category (Main)
                            </label>
                            <select name="asset_allocations[${index}][main_category]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="" class="text-black">Select Main Category (Optional)</option>
                                <option value="movable_assets" class="text-black" ${assetCategory === 'movable_assets' ? 'selected' : ''}>Movable Assets</option>
                                <option value="non_movable_assets" class="text-black" ${assetCategory === 'non_movable_assets' ? 'selected' : ''}>Non Movable Assets</option>
                                <option value="digital_assets" class="text-black" ${assetCategory === 'digital_assets' ? 'selected' : ''}>Digital Assets</option>
                                <option value="monies_and_accounts" class="text-black" ${assetCategory === 'monies_and_accounts' ? 'selected' : ''}>Monies and Accounts</option>
                                <option value="personal_assets" class="text-black" ${assetCategory === 'personal_assets' ? 'selected' : ''}>Personal Assets</option>
                                <option value="car_and_automobiles" class="text-black" ${assetCategory === 'car_and_automobiles' ? 'selected' : ''}>Car and Automobiles</option>
                                <option value="other_assets" class="text-black" ${assetCategory === 'other_assets' ? 'selected' : ''}>Other Assets</option>
                            </select>
                        </div>

                        <!-- Sub Category (User Assets) -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-folder-open text-red-600 mr-2"></i>Select Asset <span class="text-red-500">*</span>
                            </label>
                            <select name="asset_allocations[${index}][sub_category]" onchange="updateAssetsList(${index})" required
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="" class="text-black">Select Asset</option>
                            </select>
                        </div>

                        <!-- Document/Title -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-file-alt text-red-600 mr-2"></i>Document/Title <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="asset_allocations[${index}][document_title]" required
                                   value="${assetName}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Document title or reference">
                        </div>

                        <!-- Address/Location -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-map-marker-alt text-red-600 mr-2"></i>Address/Location
                            </label>
                            <input type="text" name="asset_allocations[${index}][address]"
                                   value="${assetLocation}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Asset location or address">
                        </div>

                        <!-- Description -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-info-circle text-red-600 mr-2"></i>Description
                            </label>
                            <textarea name="asset_allocations[${index}][description]" rows="3"
                                      class="w-full px-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 resize-none bg-white text-black hover:bg-gray-50"
                                      placeholder="Asset description">${assetDescription}</textarea>
                        </div>

                        <!-- Asset Value -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-dollar-sign text-red-600 mr-2"></i>Asset Value
                            </label>
                            <input type="number" name="asset_allocations[${index}][value]" step="0.01"
                                   value="${assetValue}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                        </div>

                        <!-- Monthly Income -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-chart-line text-red-600 mr-2"></i>Monthly Income
                            </label>
                            <input type="number" name="asset_allocations[${index}][monthly_income]" step="0.01"
                                   value="${monthlyIncome}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                            <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="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-tag text-red-600 mr-2"></i>Income Source Type
                            </label>
                            <select name="asset_allocations[${index}][income_type]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="">Select Income Type</option>
                                <option value="rent" ${incomeType === 'rent' ? 'selected' : ''}>Rental Income</option>
                                <option value="interest" ${incomeType === 'interest' ? 'selected' : ''}>Interest/Dividends</option>
                                <option value="business" ${incomeType === 'business' ? 'selected' : ''}>Business Income</option>
                                <option value="farm" ${incomeType === 'farm' ? 'selected' : ''}>Agricultural Income</option>
                                <option value="other" ${incomeType === 'other' ? 'selected' : ''}>Other Income</option>
                            </select>
                        </div>

                        <!-- Income Description -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-sticky-note text-red-600 mr-2"></i>Income Description
                            </label>
                            <input type="text" name="asset_allocations[${index}][income_description]"
                                   value="${incomeDesc}"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Describe the income source">
                        </div>

                        <!-- Ownership Type -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-handshake text-red-600 mr-2"></i>Ownership Type
                            </label>
                            <select name="asset_allocations[${index}][ownership_type]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="single" ${ownershipType === 'single' ? 'selected' : ''}>Single Ownership</option>
                                <option value="joint" ${ownershipType === 'joint' ? 'selected' : ''}>Joint Ownership</option>
                                <option value="tenancy" ${ownershipType === 'tenancy' ? 'selected' : ''}>Tenancy</option>
                                <option value="trust" ${ownershipType === 'trust' ? 'selected' : ''}>Trust</option>
                            </select>
                        </div>

                        <!-- Ownership Percentage -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-percent text-red-600 mr-2"></i>Ownership Percentage
                            </label>
                            <input type="number" name="asset_allocations[${index}][ownership_percentage]" step="0.01" min="0" max="100"
                                   value="${ownershipPercentage}"
                                   onchange="updateMaxAllocationLabel(${index})"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                            <div class="text-xs text-gray-500 mt-1">Percentage of asset owned by testator (0-100%)</div>
                        </div>

                        <!-- Co-Owners -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-users text-red-600 mr-2"></i>Co-Owners Details
                            </label>
                            <textarea name="asset_allocations[${index}][co_owners]" rows="2"
                                      class="w-full px-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 resize-none bg-white text-black hover:bg-gray-50"
                                      placeholder="List co-owners and their details if applicable">${coOwners || ''}</textarea>
                        </div>
                    </div>

                    <!-- Beneficiary Allocation -->
                    <div class="border-t-2 border-gray-200 pt-6">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white shadow-lg">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div>
                                    <h5 class="text-lg font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Beneficiary Allocation</h5>
                                    <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Add beneficiaries for this asset</p>
                                </div>
                            </div>
                            <button type="button" onclick="addBeneficiaryToAsset(${index})" 
                                    class="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-300 font-medium text-sm shadow-lg">
                                <i class="fas fa-plus mr-2"></i>Add Beneficiary
                            </button>
                        </div>
                        
                        <div class="space-y-4" id="beneficiaryAllocations${index}">
                            <!-- Beneficiaries will be added here by user -->
                        </div>
                        
                        <div class="mt-6 flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                            <div class="flex items-center gap-3">
                                <div class="text-sm font-medium text-gray-700">Total Allocation:</div>
                                <div id="totalPercentage${index}" class="text-lg font-bold text-red-600">0%</div>
                            </div>
                            <div class="text-xs text-gray-500 bg-white px-3 py-1 rounded-full">
                                <span id="maxAllocationLabel${index}">Max: ${(MAX_ALLOCATION_PERCENTAGE / 100 * (ownershipPercentage || 100)).toFixed(0)}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(allocationDiv);
            
            // Initialize beneficiaries array
            assetBeneficiaries[index] = [];
            
            // Initialize the asset dropdown
            updateSubCategories(index);
            
            // Set the selected asset (this user's asset)
            setTimeout(() => {
                const subCategorySelect = document.querySelector(`select[name="asset_allocations[${index}][sub_category]"]`);
                if (subCategorySelect) {
                    subCategorySelect.value = userAsset.id;
                    subCategorySelect.setAttribute('data-previous-asset', userAsset.id);
                    // Add to selected assets to prevent duplicate selection
                    selectedAssets.add(userAsset.id);
                    updateAllAssetDropdowns();
                }
            }, 100);
            
            console.log('=== createAssetAllocationFromUserAsset() COMPLETE ===');
        }

        // Create empty asset allocation
        function createEmptyAssetAllocation(index) {
            console.log('=== createEmptyAssetAllocation() CALLED for index:', index);
            const container = document.getElementById('assetAllocations');
            console.log('Container in createEmptyAssetAllocation:', container ? 'FOUND' : 'NOT FOUND');
            
            const allocationDiv = document.createElement('div');
            console.log('Created allocationDiv:', allocationDiv);
            allocationDiv.className = 'bg-gradient-to-br from-white to-gray-50 border-2 border-gray-200 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 asset-allocation relative overflow-hidden';
            allocationDiv.setAttribute('data-allocation', index);
            
            // Add decorative bubbles
            allocationDiv.innerHTML += `
                <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-red-100 to-red-200 rounded-full -mr-16 -mt-16 opacity-30"></div>
                <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-br from-red-50 to-red-100 rounded-full -ml-12 -mb-12 opacity-20"></div>
            `;
            
            allocationDiv.innerHTML += `
                <div class="relative z-10">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                ${index + 1}
                            </div>
                            <div>
                                <h4 class="text-xl font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Asset ${index + 1}</h4>
                                <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Asset allocation details</p>
                                <div class="flex items-center gap-2 mt-2 flex-wrap">
                                    <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full ${willData.is_joint ? 'bg-purple-100 text-purple-700' : 'bg-green-100 text-green-700'}">
                                        ${willData.is_joint ? '🔗 Joint Will' : '👤 Individual Will'}
                                    </span>
                                    <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-700">
                                        Max: ${MAX_ALLOCATION_PERCENTAGE}% per beneficiary
                                    </span>
                                </div>
                            </div>
                        </div>
                        <button type="button" onclick="removeAssetAllocation(this)" class="px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors font-medium text-sm shadow-lg">
                            <i class="fas fa-trash mr-1"></i>Remove
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <!-- Main Category (Optional) -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-folder text-red-600 mr-2"></i>Category (Main)
                            </label>
                            <select name="asset_allocations[${index}][main_category]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="" class="text-black">Select Main Category (Optional)</option>
                                <option value="movable_assets" class="text-black">Movable Assets</option>
                                <option value="non_movable_assets" class="text-black">Non Movable Assets</option>
                                <option value="digital_assets" class="text-black">Digital Assets</option>
                                <option value="monies_and_accounts" class="text-black">Monies and Accounts</option>
                                <option value="personal_assets" class="text-black">Personal Assets</option>
                                <option value="car_and_automobiles" class="text-black">Car and Automobiles</option>
                                <option value="other_assets" class="text-black">Other Assets</option>
                            </select>
                        </div>

                        <!-- Sub Category (User Assets) -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-folder-open text-red-600 mr-2"></i>Select Asset <span class="text-red-500">*</span>
                            </label>
                            <select name="asset_allocations[${index}][sub_category]" onchange="updateAssetsList(${index})" required
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="" class="text-black">Select Asset</option>
                            </select>
                        </div>

                        <!-- Document/Title -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-file-alt text-red-600 mr-2"></i>Document/Title <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="asset_allocations[${index}][document_title]" required
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Document title or reference">
                        </div>

                        <!-- Address/Location -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-map-marker-alt text-red-600 mr-2"></i>Address/Location
                            </label>
                            <input type="text" name="asset_allocations[${index}][address]"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Asset location or address">
                        </div>

                        <!-- Description -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-info-circle text-red-600 mr-2"></i>Description
                            </label>
                            <textarea name="asset_allocations[${index}][description]" rows="3"
                                      class="w-full px-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 resize-none bg-white text-black hover:bg-gray-50"
                                      placeholder="Asset description"></textarea>
                        </div>

                        <!-- Asset Value -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-dollar-sign text-red-600 mr-2"></i>Asset Value
                            </label>
                            <input type="number" name="asset_allocations[${index}][value]" step="0.01"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                        </div>

                        <!-- Monthly Income -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-chart-line text-red-600 mr-2"></i>Monthly Income
                            </label>
                            <input type="number" name="asset_allocations[${index}][monthly_income]" step="0.01"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                            <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="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-tag text-red-600 mr-2"></i>Income Source Type
                            </label>
                            <select name="asset_allocations[${index}][income_type]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <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="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-sticky-note text-red-600 mr-2"></i>Income Description
                            </label>
                            <input type="text" name="asset_allocations[${index}][income_description]"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Describe the income source">
                        </div>

                        <!-- Ownership Type -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-handshake text-red-600 mr-2"></i>Ownership Type
                            </label>
                            <select name="asset_allocations[${index}][ownership_type]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="single" selected>Single Ownership</option>
                                <option value="joint">Joint Ownership</option>
                                <option value="tenancy">Tenancy</option>
                                <option value="trust">Trust</option>
                            </select>
                        </div>

                        <!-- Ownership Percentage -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-percent text-red-600 mr-2"></i>Ownership Percentage
                            </label>
                            <input type="number" name="asset_allocations[${index}][ownership_percentage]" step="0.01" min="0" max="100" value="100"
                                   onchange="updateMaxAllocationLabel(${index})"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                            <div class="text-xs text-gray-500 mt-1">Percentage of asset owned by testator (0-100%)</div>
                        </div>

                        <!-- Co-Owners -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-users text-red-600 mr-2"></i>Co-Owners Details
                            </label>
                            <textarea name="asset_allocations[${index}][co_owners]" rows="2"
                                      class="w-full px-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 resize-none bg-white text-black hover:bg-gray-50"
                                      placeholder="List co-owners and their details if applicable"></textarea>
                        </div>
                    </div>

                    <!-- Beneficiary Allocation -->
                    <div class="border-t-2 border-gray-200 pt-6">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white shadow-lg">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div>
                                    <h5 class="text-lg font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Beneficiary Allocation</h5>
                                    <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Add beneficiaries for this asset</p>
                                </div>
                            </div>
                            <button type="button" onclick="addBeneficiaryToAsset(${index})" 
                                    class="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-300 font-medium text-sm shadow-lg">
                                <i class="fas fa-plus mr-2"></i>Add Beneficiary
                            </button>
                        </div>
                        
                        <div class="space-y-4" id="beneficiaryAllocations${index}">
                            <!-- Beneficiaries will be added dynamically here -->
                        </div>
                        
                        <div class="mt-6 flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                            <div class="flex items-center gap-3">
                                <div class="text-sm font-medium text-gray-700">Total Allocation:</div>
                                <div id="totalPercentage${index}" class="text-lg font-bold text-red-600">0%</div>
                            </div>
                            <div class="text-xs text-gray-500 bg-white px-3 py-1 rounded-full">
                                <span id="maxAllocationLabel${index}">Max: ${MAX_ALLOCATION_PERCENTAGE}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(allocationDiv);
            console.log('Asset', index + 1, 'appended to container');
            
            // Initialize beneficiaries array
            assetBeneficiaries[index] = [];
            
            // Initialize the asset dropdown
            console.log('Calling updateSubCategories for index:', index);
            updateSubCategories(index);
            console.log('=== createEmptyAssetAllocation() COMPLETE ===');
        }

        // Create beneficiary HTML for existing beneficiaries
        function createBeneficiaryHTML(allocationIndex, beneficiaryIndex, beneficiary) {
            return `
                <div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl p-6 border-2 border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300 relative overflow-hidden" data-beneficiary-index="${beneficiaryIndex}">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full -mr-12 -mt-12 opacity-30"></div>
                    <div class="absolute bottom-0 left-0 w-16 h-16 bg-gradient-to-br from-blue-50 to-blue-100 rounded-full -ml-8 -mb-8 opacity-20"></div>
                    
                    <div class="relative z-10">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                    ${beneficiaryIndex + 1}
                                </div>
                                <div>
                                    <h6 class="text-lg font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Beneficiary ${beneficiaryIndex + 1}</h6>
                                    <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Selected person and allocation</p>
                                </div>
                            </div>
                            <button type="button" onclick="removeBeneficiaryFromAsset(${allocationIndex}, ${beneficiaryIndex})" 
                                    class="px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all duration-300 text-sm shadow-lg">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                    <i class="fas fa-user text-blue-600 mr-2"></i>Person Name <span class="text-red-500">*</span>
                                </label>
                                <select id="beneficiarySelect${allocationIndex}_${beneficiaryIndex}" onchange="selectAssetBeneficiary(${allocationIndex}, ${beneficiaryIndex})" 
                                        class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                    <option value="" class="text-black">Select Person</option>
                                </select>
                                <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryIndex}][person_id]" 
                                       id="beneficiaryPersonId${allocationIndex}_${beneficiaryIndex}" value="${beneficiary.beneficiary_type}_${beneficiary.beneficiary_id}">
                            </div>
                            
                            <div class="group">
                                <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                    <i class="fas fa-percentage text-blue-600 mr-2"></i>Percentage <span class="text-red-500">*</span>
                                </label>
                                <div class="flex items-center gap-3">
                                    <input type="number" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryIndex}][percentage]" 
                                           min="0" max="${MAX_ALLOCATION_PERCENTAGE}" step="any" placeholder="0%" onchange="updatePercentage(${allocationIndex})"
                                           value="${beneficiary.percentage ? Math.round(beneficiary.percentage) : ''}"
                                           class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                           title="For ${willData.is_joint ? 'joint wills' : 'individual wills'}, maximum allocation is ${MAX_ALLOCATION_PERCENTAGE}%">
                                    <span class="text-sm text-gray-600 font-medium">%</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Selected Beneficiary Details -->
                        <div id="selectedBeneficiaryDetails${allocationIndex}_${beneficiaryIndex}" class="bg-white rounded-xl border-2 border-gray-200 p-6 mt-4">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center text-white shadow">
                                    <i class="fas fa-info-circle"></i>
                                </div>
                                <h6 class="text-lg font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Selected Person Details</h6>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1">Full Name</label>
                                    <input type="text" id="selectedBeneficiaryName${allocationIndex}_${beneficiaryIndex}" readonly
                                           class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                    <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryIndex}][full_name]" 
                                           id="beneficiaryFullName${allocationIndex}_${beneficiaryIndex}" value="${beneficiary.full_name || ''}">
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1">IC Number</label>
                                    <input type="text" id="selectedBeneficiaryIC${allocationIndex}_${beneficiaryIndex}" readonly
                                           class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                    <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryIndex}][ic_number]" 
                                           id="beneficiaryICNumber${allocationIndex}_${beneficiaryIndex}" value="${beneficiary.ic_number || ''}">
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1">Email</label>
                                    <input type="email" id="selectedBeneficiaryEmail${allocationIndex}_${beneficiaryIndex}" readonly
                                           class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                    <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryIndex}][email]" 
                                           id="beneficiaryEmail${allocationIndex}_${beneficiaryIndex}" value="${beneficiary.email || ''}">
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1">Phone</label>
                                    <input type="tel" id="selectedBeneficiaryPhone${allocationIndex}_${beneficiaryIndex}" readonly
                                           class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                    <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryIndex}][phone]" 
                                           id="beneficiaryPhone${allocationIndex}_${beneficiaryIndex}" value="${beneficiary.phone || ''}">
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1">Address</label>
                                    <textarea id="selectedBeneficiaryAddress${allocationIndex}_${beneficiaryIndex}" rows="6" readonly 
                                              class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black resize-none">${beneficiary.address || ''}</textarea>
                                    <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryIndex}][address]" 
                                           id="beneficiaryAddress${allocationIndex}_${beneficiaryIndex}" value="${beneficiary.address || ''}">
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-gray-600 mb-1">Relationship</label>
                                    <input type="text" id="selectedBeneficiaryRelationship${allocationIndex}_${beneficiaryIndex}" readonly
                                           class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                    <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryIndex}][relationship]" 
                                           id="beneficiaryRelationship${allocationIndex}_${beneficiaryIndex}" value="${beneficiary.relationship || ''}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // Update subcategories based on main category - show all user assets
        function updateSubCategories(allocationIndex) {
            console.log('=== updateSubCategories() CALLED for index:', allocationIndex);
            const subCategorySelect = document.querySelector(`select[name="asset_allocations[${allocationIndex}][sub_category]"]`);
            console.log('subCategorySelect found:', subCategorySelect ? 'YES' : 'NO');
            if (!subCategorySelect) {
                console.error('Cannot find subCategorySelect for index:', allocationIndex);
                return;
            }
            const currentSelectedAsset = subCategorySelect.value;
            console.log('userAssets available:', userAssets.length);
            console.log('currentSelectedAsset:', currentSelectedAsset);
            
            subCategorySelect.innerHTML = '<option value="" class="text-black">Select Asset or Add New</option>';
            
            // Always add "Add New Asset" option first
            subCategorySelect.innerHTML += `<option value="custom_new" class="text-black font-semibold">+ Add New Asset</option>`;
            
            // Add separator if there are existing assets
            if (userAssets.length > 0) {
                subCategorySelect.innerHTML += `<optgroup label="Existing Assets" class="text-gray-500">`;
            }
            
            // Add ALL user assets to dropdown (including currently selected one)
            userAssets.forEach(asset => {
                const assetName = asset.name || asset.title || asset.type || 'Unnamed Asset';
                const assetDescription = asset.description || '';
                const assetValue = asset.value ? `RM ${asset.value}` : '';
                const displayText = assetDescription && assetValue ? 
                    `${assetName} - ${assetDescription} (${assetValue})` : 
                    assetDescription ? `${assetName} - ${assetDescription}` : 
                    assetValue ? `${assetName} (${assetValue})` : 
                    assetName;
                
                subCategorySelect.innerHTML += `<option value="${asset.id}" class="text-black">${displayText}</option>`;
            });
            
            // Close optgroup if it was opened
            if (userAssets.length > 0) {
                subCategorySelect.innerHTML += `</optgroup>`;
            }
            
            // Restore previously selected asset
            if (currentSelectedAsset) {
                console.log('Setting dropdown value to:', currentSelectedAsset);
                subCategorySelect.value = currentSelectedAsset;
                console.log('Dropdown value after setting:', subCategorySelect.value);
            }
            
            console.log('=== updateSubCategories() COMPLETE for index:', allocationIndex);
        }

        // Update assets list based on subcategory
        function updateAssetsList(allocationIndex) {
            console.log('=== updateAssetsList() CALLED for index:', allocationIndex);
            const subCategorySelect = document.querySelector(`select[name="asset_allocations[${allocationIndex}][sub_category]"]`);
            const selectedOption = subCategorySelect.value;
            console.log('DEBUG: selectedOption:', selectedOption);
            
            if (selectedOption) {
                // Remove previously selected asset from this allocation (if any)
                const previousAsset = subCategorySelect.getAttribute('data-previous-asset');
                if (previousAsset && previousAsset !== 'custom_new') {
                    selectedAssets.delete(parseInt(previousAsset));
                }
                
                // Check if it's a user asset or custom asset
                if (selectedOption === 'custom_new') {
                    // Custom asset - show all fields
                    showAllAssetFields(allocationIndex);
                    subCategorySelect.setAttribute('data-previous-asset', 'custom_new');
                } else {
                    // User asset - populate fields with asset data
                    const asset = userAssets.find(a => a.id == selectedOption);
                    if (asset) {
                        populateAssetFields(allocationIndex, asset);
                        selectedAssets.add(asset.id);
                        subCategorySelect.setAttribute('data-previous-asset', asset.id);
                    }
                }
                
                // Update all other asset dropdowns to hide the newly selected asset
                updateAllAssetDropdowns();
            }
        }

        // Update all asset dropdowns to hide selected assets
        function updateAllAssetDropdowns() {
            const allAllocations = document.querySelectorAll('.asset-allocation');
            allAllocations.forEach((allocation, index) => {
                updateSubCategories(index);
            });
        }

        // Categorize asset based on its type
        function categorizeAsset(assetType) {
            const type = assetType.toLowerCase();
            
            if (['house', 'apartment', 'land', 'commercial property', 'condominium', 'real estate'].some(keyword => type.includes(keyword))) {
                return 'non_movable_assets';
            }
            if (['car', 'motorcycle', 'truck', 'boat', 'aircraft', 'vehicle'].some(keyword => type.includes(keyword))) {
                return 'car_and_automobiles';
            }
            if (['cryptocurrency', 'digital art', 'domain names', 'software', 'online accounts', 'digital'].some(keyword => type.includes(keyword))) {
                return 'digital_assets';
            }
            if (['savings', 'current', 'fixed deposit', 'joint', 'investment', 'bank', 'account'].some(keyword => type.includes(keyword))) {
                return 'monies_and_accounts';
            }
            if (['jewelry', 'electronics', 'furniture', 'art', 'collectibles', 'movable'].some(keyword => type.includes(keyword))) {
                return 'movable_assets';
            }
            if (['clothing', 'books', 'documents', 'photos', 'memorabilia', 'personal'].some(keyword => type.includes(keyword))) {
                return 'personal_assets';
            }
            
            return 'other_assets';
        }

        // Show all asset fields for custom assets
        function showAllAssetFields(allocationIndex) {
            // Enable all fields for manual entry
            const fields = ['document_title', 'address', 'description', 'value'];
            fields.forEach(field => {
                const input = document.querySelector(`input[name="asset_allocations[${allocationIndex}][${field}"]`);
                if (input) {
                    input.disabled = false;
                    input.required = field === 'document_title';
                }
            });
        }

        // Populate asset fields with user asset data
        function populateAssetFields(allocationIndex, asset) {
            console.log('=== populateAssetFields() CALLED ===');
            console.log('DEBUG: allocationIndex:', allocationIndex);
            console.log('DEBUG: asset data:', asset);
            console.log('DEBUG: asset.monthly_income:', asset.monthly_income);
            console.log('DEBUG: asset.income_type:', asset.income_type);
            console.log('DEBUG: asset.income_description:', asset.income_description);
            
            // Populate fields with asset data
            const titleInput = document.querySelector(`input[name="asset_allocations[${allocationIndex}][document_title]"]`);
            const addressInput = document.querySelector(`input[name="asset_allocations[${allocationIndex}][address]"]`);
            const descInput = document.querySelector(`textarea[name="asset_allocations[${allocationIndex}][description]"]`);
            const valueInput = document.querySelector(`input[name="asset_allocations[${allocationIndex}][value]"]`);
            const monthlyIncomeInput = document.querySelector(`input[name="asset_allocations[${allocationIndex}][monthly_income]"]`);
            const incomeTypeSelect = document.querySelector(`select[name="asset_allocations[${allocationIndex}][income_type]"]`);
            const incomeDescInput = document.querySelector(`input[name="asset_allocations[${allocationIndex}][income_description]"]`);
            const annualIncomeInput = document.querySelector(`input[name="asset_allocations[${allocationIndex}][annual_income]"]`);
            const incomeFrequencySelect = document.querySelector(`select[name="asset_allocations[${allocationIndex}][income_frequency]"]`);
            
            console.log('DEBUG: monthlyIncomeInput found:', monthlyIncomeInput ? 'YES' : 'NO');
            console.log('DEBUG: incomeTypeSelect found:', incomeTypeSelect ? 'YES' : 'NO');
            console.log('DEBUG: incomeDescInput found:', incomeDescInput ? 'YES' : 'NO');
            console.log('DEBUG: annualIncomeInput found:', annualIncomeInput ? 'YES' : 'NO');
            console.log('DEBUG: incomeFrequencySelect found:', incomeFrequencySelect ? 'YES' : 'NO');
            
            const assetName = asset.name || asset.title || asset.type || 'Unnamed Asset';
            
            if (titleInput) {
                titleInput.value = assetName;
            }
            if (addressInput) {
                addressInput.value = asset.location || asset.address || '';
            }
            if (descInput) {
                descInput.value = asset.description || '';
            }
            if (valueInput) {
                valueInput.value = asset.value || '';
            }
            if (monthlyIncomeInput) {
                console.log('=== MONTHLY INCOME DEBUG ===');
                console.log('asset.monthly_income:', asset.monthly_income);
                console.log('Type of asset.monthly_income:', typeof asset.monthly_income);
                console.log('monthlyIncomeInput element:', monthlyIncomeInput);
                monthlyIncomeInput.value = asset.monthly_income || '';
                console.log('Value after setting:', monthlyIncomeInput.value);
            }
            if (incomeTypeSelect) {
                console.log('DEBUG: Setting income_type to:', asset.income_type || '');
                incomeTypeSelect.value = asset.income_type || '';
                console.log('DEBUG: incomeTypeSelect.value after setting:', incomeTypeSelect.value);
            }
            if (incomeDescInput) {
                console.log('DEBUG: Setting income_description to:', asset.income_description || '');
                incomeDescInput.value = asset.income_description || '';
                console.log('DEBUG: incomeDescInput.value after setting:', incomeDescInput.value);
            }
            if (annualIncomeInput) {
                console.log('DEBUG: Setting annual_income to:', asset.annual_income || '');
                annualIncomeInput.value = asset.annual_income || '';
                console.log('DEBUG: annualIncomeInput.value after setting:', annualIncomeInput.value);
            }
            if (incomeFrequencySelect) {
                console.log('DEBUG: Setting income_frequency to:', asset.income_frequency || '');
                incomeFrequencySelect.value = asset.income_frequency || '';
                console.log('DEBUG: incomeFrequencySelect.value after setting:', incomeFrequencySelect.value);
            }
        }

        // Add beneficiary to specific asset
        function addBeneficiaryToAsset(allocationIndex) {
            if (!assetBeneficiaries[allocationIndex]) {
                assetBeneficiaries[allocationIndex] = [];
            }
            
            const container = document.getElementById(`beneficiaryAllocations${allocationIndex}`);
            const beneficiaryCount = assetBeneficiaries[allocationIndex].length + 1;
            
            const beneficiaryDiv = document.createElement('div');
            beneficiaryDiv.className = 'bg-gradient-to-br from-white to-gray-50 rounded-2xl p-6 border-2 border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300 relative overflow-hidden';
            beneficiaryDiv.setAttribute('data-beneficiary-index', beneficiaryCount - 1);
            
            // Add decorative bubbles
            beneficiaryDiv.innerHTML += `
                <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full -mr-12 -mt-12 opacity-30"></div>
                <div class="absolute bottom-0 left-0 w-16 h-16 bg-gradient-to-br from-blue-50 to-blue-100 rounded-full -ml-8 -mb-8 opacity-20"></div>
            `;
            
            beneficiaryDiv.innerHTML += `
                <div class="relative z-10">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                ${beneficiaryCount}
                            </div>
                            <div>
                                <h6 class="text-lg font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Beneficiary ${beneficiaryCount}</h6>
                                <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Select person and allocation</p>
                            </div>
                        </div>
                        <button type="button" onclick="removeBeneficiaryFromAsset(${allocationIndex}, ${beneficiaryCount - 1})" 
                                class="px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all duration-300 text-sm shadow-lg">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-user text-blue-600 mr-2"></i>Person Name <span class="text-red-500">*</span>
                            </label>
                            <select id="beneficiarySelect${allocationIndex}_${beneficiaryCount - 1}" onchange="selectAssetBeneficiary(${allocationIndex}, ${beneficiaryCount - 1})" 
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="" class="text-black">Select Person</option>
                                <!-- Beneficiaries will be populated here -->
                            </select>
                            <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryCount - 1}][person_id]" 
                                   id="beneficiaryPersonId${allocationIndex}_${beneficiaryCount - 1}">
                        </div>
                        
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-percentage text-blue-600 mr-2"></i>Percentage <span class="text-red-500">*</span>
                            </label>
                            <div class="flex items-center gap-3">
                                <input type="number" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryCount - 1}][percentage]" 
                                       min="0" max="${MAX_ALLOCATION_PERCENTAGE}" step="any" placeholder="0%" onchange="updatePercentage(${allocationIndex})"
                                       class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                       title="For ${willData.is_joint ? 'joint wills' : 'individual wills'}, maximum allocation is ${MAX_ALLOCATION_PERCENTAGE}%">
                                <span class="text-sm text-gray-600 font-medium">%</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Selected Beneficiary Details (hidden initially) -->
                    <div id="selectedBeneficiaryDetails${allocationIndex}_${beneficiaryCount - 1}" class="hidden bg-white rounded-xl border-2 border-gray-200 p-6 mt-4">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center text-white shadow">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            <h6 class="text-lg font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Selected Person Details</h6>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1">Full Name</label>
                                <input type="text" id="selectedBeneficiaryName${allocationIndex}_${beneficiaryCount - 1}" readonly
                                       class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryCount - 1}][full_name]" 
                                       id="beneficiaryFullName${allocationIndex}_${beneficiaryCount - 1}">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1">IC Number</label>
                                <input type="text" id="selectedBeneficiaryIC${allocationIndex}_${beneficiaryCount - 1}" readonly
                                       class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryCount - 1}][ic_number]" 
                                       id="beneficiaryICNumber${allocationIndex}_${beneficiaryCount - 1}">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1">Email</label>
                                <input type="email" id="selectedBeneficiaryEmail${allocationIndex}_${beneficiaryCount - 1}" readonly
                                       class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryCount - 1}][email]" 
                                       id="beneficiaryEmail${allocationIndex}_${beneficiaryCount - 1}">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1">Phone</label>
                                <input type="tel" id="selectedBeneficiaryPhone${allocationIndex}_${beneficiaryCount - 1}" readonly
                                       class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryCount - 1}][phone]" 
                                       id="beneficiaryPhone${allocationIndex}_${beneficiaryCount - 1}">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1">Address</label>
                                <textarea id="selectedBeneficiaryAddress${allocationIndex}_${beneficiaryCount - 1}" rows="6" readonly 
                                          class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black resize-none"></textarea>
                                <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryCount - 1}][address]" 
                                       id="beneficiaryAddress${allocationIndex}_${beneficiaryCount - 1}">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1">Relationship</label>
                                <input type="text" id="selectedBeneficiaryRelationship${allocationIndex}_${beneficiaryCount - 1}" readonly
                                       class="w-full px-4 py-4 text-sm border border-gray-300 rounded-lg bg-gray-50 font-medium text-black">
                                <input type="hidden" name="asset_allocations[${allocationIndex}][beneficiaries][${beneficiaryCount - 1}][relationship]" 
                                       id="beneficiaryRelationship${allocationIndex}_${beneficiaryCount - 1}">
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(beneficiaryDiv);
            assetBeneficiaries[allocationIndex].push({ index: beneficiaryCount - 1, selected: null });
            
            // Populate the dropdown
            populateAssetBeneficiaries(allocationIndex, beneficiaryCount - 1);
            
            // IMPORTANT: Call updatePercentage AFTER beneficiary is added
            setTimeout(() => {
                console.log('DEBUG: Calling updatePercentage for allocation', allocationIndex, 'after adding new beneficiary');
                updatePercentage(allocationIndex);
            }, 100);
        }

        // Populate beneficiaries dropdown for specific asset
        function populateAssetBeneficiaries(allocationIndex, beneficiaryIndex) {
            const selectElement = document.getElementById(`beneficiarySelect${allocationIndex}_${beneficiaryIndex}`);
            
            if (!selectElement) {
                return;
            }
            
            // Get currently selected value for this beneficiary slot
            const currentSelected = assetBeneficiaries[allocationIndex] && assetBeneficiaries[allocationIndex][beneficiaryIndex] 
                ? assetBeneficiaries[allocationIndex][beneficiaryIndex].selected 
                : null;
            
            // Get all already-selected beneficiaries for this asset (excluding current slot)
            const selectedForThisAsset = new Set();
            if (assetBeneficiaries[allocationIndex]) {
                assetBeneficiaries[allocationIndex].forEach((beneficiary, idx) => {
                    if (idx !== beneficiaryIndex && beneficiary.selected) {
                        selectedForThisAsset.add(beneficiary.selected);
                    }
                });
            }
            
            // Clear existing options except the first one
            selectElement.innerHTML = '<option value="">Select Person</option>';
            
            // Only add family members that are not already selected (except current selection)
            familyMembers.forEach((member) => {
                const memberValue = `member_${member.id}`;
                
                // Skip if already selected by another beneficiary slot for this asset
                // But include if it's the current selection for this slot
                if (selectedForThisAsset.has(memberValue) && memberValue !== currentSelected) {
                    return;
                }
                
                const optionElement = document.createElement('option');
                optionElement.value = memberValue;
                optionElement.textContent = `${member.first_name || ''} ${member.last_name || ''} (${member.relationship})`.trim();
                optionElement.className = 'text-black';
                selectElement.appendChild(optionElement);
            });

            // Restore the selected value
            if (currentSelected) {
                selectElement.value = currentSelected;
            }
        }
        
        // Refresh all beneficiary dropdowns for a specific asset (call when selection changes)
        function refreshBeneficiaryDropdowns(allocationIndex) {
            if (!assetBeneficiaries[allocationIndex]) return;
            
            assetBeneficiaries[allocationIndex].forEach((beneficiary, index) => {
                const currentValue = beneficiary.selected;
                populateAssetBeneficiaries(allocationIndex, index);
                
                // Restore selection if still valid
                const selectElement = document.getElementById(`beneficiarySelect${allocationIndex}_${index}`);
                if (selectElement && currentValue) {
                    // Check if the option still exists
                    const optionExists = Array.from(selectElement.options).some(opt => opt.value === currentValue);
                    if (optionExists) {
                        selectElement.value = currentValue;
                    } else {
                        // Selection is no longer valid (was removed by another selection)
                        beneficiary.selected = '';
                        selectElement.value = '';
                        // Hide details container
                        const detailsContainer = document.getElementById(`selectedBeneficiaryDetails${allocationIndex}_${index}`);
                        if (detailsContainer) {
                            detailsContainer.classList.add('hidden');
                        }
                    }
                }
            });
        }

        // Handle beneficiary selection for specific asset
        function selectAssetBeneficiary(allocationIndex, beneficiaryIndex) {
            const selectElement = document.getElementById(`beneficiarySelect${allocationIndex}_${beneficiaryIndex}`);
            const selectedValue = selectElement.value;
            const detailsContainer = document.getElementById(`selectedBeneficiaryDetails${allocationIndex}_${beneficiaryIndex}`);
            const personIdInput = document.getElementById(`beneficiaryPersonId${allocationIndex}_${beneficiaryIndex}`);
            
            // Update the selected beneficiary in our tracking
            assetBeneficiaries[allocationIndex][beneficiaryIndex].selected = selectedValue;
            
            // Update the hidden person_id field
            personIdInput.value = selectedValue;
            
            // Refresh all dropdowns for this asset to exclude newly selected beneficiary
            refreshBeneficiaryDropdowns(allocationIndex);
            
            if (selectedValue) {
                // Parse the selected value (only family members now)
                const [type, id] = selectedValue.split('_');
                let personData = null;
                
                if (type === 'member') {
                    personData = familyMembers.find(member => member.id == id);
                }
                
                if (personData) {
                    // Get beneficiary details
                    const fullName = personData.full_name || `${personData.first_name || ''} ${personData.last_name || ''}`.trim();
                    const icNumber = personData.ic_number || personData.ic || '';
                    const email = personData.email || '';
                    const phone = personData.phone || '';
                    const address = personData.address || '';
                    const relationship = personData.relationship || '';
                    
                    // Populate visible fields
                    document.getElementById(`selectedBeneficiaryName${allocationIndex}_${beneficiaryIndex}`).value = fullName;
                    document.getElementById(`selectedBeneficiaryIC${allocationIndex}_${beneficiaryIndex}`).value = icNumber;
                    document.getElementById(`selectedBeneficiaryEmail${allocationIndex}_${beneficiaryIndex}`).value = email;
                    document.getElementById(`selectedBeneficiaryPhone${allocationIndex}_${beneficiaryIndex}`).value = phone;
                    document.getElementById(`selectedBeneficiaryAddress${allocationIndex}_${beneficiaryIndex}`).value = address;
                    document.getElementById(`selectedBeneficiaryRelationship${allocationIndex}_${beneficiaryIndex}`).value = relationship;
                    
                    // Populate hidden fields for form submission
                    document.getElementById(`beneficiaryFullName${allocationIndex}_${beneficiaryIndex}`).value = fullName;
                    document.getElementById(`beneficiaryICNumber${allocationIndex}_${beneficiaryIndex}`).value = icNumber;
                    document.getElementById(`beneficiaryEmail${allocationIndex}_${beneficiaryIndex}`).value = email;
                    document.getElementById(`beneficiaryPhone${allocationIndex}_${beneficiaryIndex}`).value = phone;
                    document.getElementById(`beneficiaryAddress${allocationIndex}_${beneficiaryIndex}`).value = address;
                    document.getElementById(`beneficiaryRelationship${allocationIndex}_${beneficiaryIndex}`).value = relationship;
                    
                    // Show details container
                    detailsContainer.classList.remove('hidden');
                }
            } else {
                // Hide details container when no beneficiary selected
                detailsContainer.classList.add('hidden');
                
                // Clear hidden fields
                document.getElementById(`beneficiaryFullName${allocationIndex}_${beneficiaryIndex}`).value = '';
                document.getElementById(`beneficiaryICNumber${allocationIndex}_${beneficiaryIndex}`).value = '';
                document.getElementById(`beneficiaryEmail${allocationIndex}_${beneficiaryIndex}`).value = '';
                document.getElementById(`beneficiaryPhone${allocationIndex}_${beneficiaryIndex}`).value = '';
                document.getElementById(`beneficiaryAddress${allocationIndex}_${beneficiaryIndex}`).value = '';
                document.getElementById(`beneficiaryRelationship${allocationIndex}_${beneficiaryIndex}`).value = '';
            }
            
            // Update percentage calculation
updatePercentage(allocationIndex);
        }

        // Auto-distribute remaining percentage among beneficiaries (DISABLED - prevent interference)
        function autoDistributePercentage(allocationIndex, changedBeneficiaryIndex) {
            // Function disabled to prevent automatic percentage changes
            // Users should manually enter percentages
            return;
        }

        // Remove beneficiary from specific asset
        function removeBeneficiaryFromAsset(allocationIndex, beneficiaryIndex) {
            const beneficiaryDiv = document.querySelector(`#beneficiaryAllocations${allocationIndex} [data-beneficiary-index="${beneficiaryIndex}"]`);
            
            if (beneficiaryDiv) {
                beneficiaryDiv.remove();
                assetBeneficiaries[allocationIndex].splice(beneficiaryIndex, 1);
                
                // Re-index remaining beneficiaries
                assetBeneficiaries[allocationIndex].forEach((beneficiary, index) => {
                    beneficiary.index = index;
                });
                
                // Update all dropdowns to refresh availability
                assetBeneficiaries[allocationIndex].forEach((beneficiary, index) => {
                    populateAssetBeneficiaries(allocationIndex, index);
                    // Restore selection if exists
                    if (beneficiary.selected) {
                        document.getElementById(`beneficiarySelect${allocationIndex}_${index}`).value = beneficiary.selected;
                    }
                });
                
                // Update percentage calculation
updatePercentage(allocationIndex);
            }
        }

        // Update percentage calculation for specific asset
        function updatePercentage(allocationIndex) {
            console.log('=== updatePercentage called for allocation:', allocationIndex, '===');
            
            // Get the ownership percentage for this asset
            const ownershipPercentageInput = document.querySelector(`input[name="asset_allocations[${allocationIndex}][ownership_percentage]"]`);
            const ownershipPercentage = ownershipPercentageInput ? parseFloat(ownershipPercentageInput.value) || 100 : 100;
            
            console.log('DEBUG: ownershipPercentage =', ownershipPercentage);
            console.log('DEBUG: MAX_ALLOCATION_PERCENTAGE =', MAX_ALLOCATION_PERCENTAGE);
            
            // Calculate max allocation based on both will type AND ownership percentage
            // For joint wills: 50% of ownership, for individual wills: 100% of ownership
            const maxAllocationForThisAsset = (MAX_ALLOCATION_PERCENTAGE / 100) * ownershipPercentage;
            
            console.log('DEBUG: maxAllocationForThisAsset =', maxAllocationForThisAsset);
            
            const percentageInputs = document.querySelectorAll(`#beneficiaryAllocations${allocationIndex} input[name*="[percentage]"]`);
            
            let totalPercentage = 0;
            
            percentageInputs.forEach(input => {
                console.log('Input value:', input.value);
                if (input.value) {
                    totalPercentage += parseFloat(input.value) || 0;
                }
            });

            // Update total percentage display
            const totalDisplay = document.getElementById(`totalPercentage${allocationIndex}`);
            totalDisplay.textContent = totalPercentage.toFixed(1) + '%';
            
            // Color code the total based on calculated max allocation for this asset's ownership
            if (Math.abs(totalPercentage - maxAllocationForThisAsset) < 0.01) {
                // Perfect allocation
                totalDisplay.className = 'font-bold text-green-600';
            } else if (totalPercentage > maxAllocationForThisAsset) {
                // Over-allocated
                totalDisplay.className = 'font-bold text-red-600';
            } else {
                // Under-allocated
                totalDisplay.className = 'font-bold text-orange-600';
            }
            
            // Log status
            console.log(`Asset ${allocationIndex}: ${totalPercentage}% / ${maxAllocationForThisAsset}% (Ownership: ${ownershipPercentage}%, Will Type: ${willData.is_joint ? 'Joint' : 'Individual'})`);
        }

        // Update max allocation label when ownership percentage changes
        function updateMaxAllocationLabel(allocationIndex) {
            const ownershipPercentageInput = document.querySelector(`input[name="asset_allocations[${allocationIndex}][ownership_percentage]"]`);
            const ownershipPercentage = ownershipPercentageInput ? parseFloat(ownershipPercentageInput.value) || 100 : 100;
            
            // Calculate max allocation based on both will type AND ownership percentage
            const maxAllocationForThisAsset = (MAX_ALLOCATION_PERCENTAGE / 100) * ownershipPercentage;
            
            const maxAllocationLabel = document.getElementById(`maxAllocationLabel${allocationIndex}`);
            if (maxAllocationLabel) {
                maxAllocationLabel.textContent = `Max: ${maxAllocationForThisAsset.toFixed(0)}%`;
            }
            
            console.log(`Updated max allocation for Asset ${allocationIndex}: ${maxAllocationForThisAsset.toFixed(0)}% (Ownership: ${ownershipPercentage}%)`);
        }

        // Add new asset allocation
        function addNewAssetAllocation() {
            createEmptyAssetAllocation(allocationCounter);
            allocationCounter++;
        }

        // Remove asset allocation
        function removeAssetAllocation(button) {
            const allocationDiv = button.closest('.asset-allocation');
            const allocationIndex = allocationDiv.getAttribute('data-allocation');
            
            // Remove from tracking
            if (assetBeneficiaries[allocationIndex]) {
                // Release selected beneficiaries back to available pool
                assetBeneficiaries[allocationIndex].forEach(beneficiary => {
                    if (beneficiary.selected) {
                        // This will be handled by the dropdown repopulation
                    }
                });
                delete assetBeneficiaries[allocationIndex];
            }
            
            // Remove the element
            allocationDiv.remove();
            
            // Update all dropdowns to refresh availability
            updateAllAssetDropdowns();
        }

        // Add new asset allocation (legacy function)
        function addAssetAllocation() {
            allocationCounter++;
            
            const container = document.getElementById('assetAllocations');
            const newAllocation = document.createElement('div');
            newAllocation.className = 'bg-gradient-to-br from-white to-gray-50 border-2 border-gray-200 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 asset-allocation relative overflow-hidden';
            newAllocation.setAttribute('data-allocation', allocationCounter);
            
            // Add decorative bubbles
            newAllocation.innerHTML += `
                <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-red-100 to-red-200 rounded-full -mr-16 -mt-16 opacity-30"></div>
                <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-br from-red-50 to-red-100 rounded-full -ml-12 -mb-12 opacity-20"></div>
            `;
            
            newAllocation.innerHTML += `
                <div class="relative z-10">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                ${allocationCounter + 1}
                            </div>
                            <div>
                                <h4 class="text-xl font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Asset ${allocationCounter + 1}</h4>
                                <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Asset allocation details</p>
                                <div class="flex items-center gap-2 mt-2 flex-wrap">
                                    <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full ${willData.is_joint ? 'bg-purple-100 text-purple-700' : 'bg-green-100 text-green-700'}">
                                        ${willData.is_joint ? '🔗 Joint Will' : '👤 Individual Will'}
                                    </span>
                                    <span class="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-700">
                                        Max: ${MAX_ALLOCATION_PERCENTAGE}% per beneficiary
                                    </span>
                                </div>
                            </div>
                        </div>
                        <button type="button" onclick="removeAssetAllocation(this)" class="px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors font-medium text-sm shadow-lg">
                            <i class="fas fa-trash mr-1"></i>Remove
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <!-- Main Category (Optional) -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-folder text-red-600 mr-2"></i>Category (Main)
                            </label>
                            <select name="asset_allocations[${allocationCounter}][main_category]"
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="" class="text-black">Select Main Category (Optional)</option>
                                <option value="movable_assets" class="text-black">Movable Assets</option>
                                <option value="non_movable_assets" class="text-black">Non Movable Assets</option>
                                <option value="digital_assets" class="text-black">Digital Assets</option>
                                <option value="monies_and_accounts" class="text-black">Monies and Accounts</option>
                                <option value="personal_assets" class="text-black">Personal Assets</option>
                                <option value="car_and_automobiles" class="text-black">Car and Automobiles</option>
                                <option value="other_assets" class="text-black">Other Assets</option>
                            </select>
                        </div>

                        <!-- Sub Category (User Assets) -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-folder-open text-red-600 mr-2"></i>Select Asset <span class="text-red-500">*</span>
                            </label>
                            <select name="asset_allocations[${allocationCounter}][sub_category]" onchange="updateAssetsList(${allocationCounter})" required
                                    class="w-full px-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 bg-white text-black hover:bg-gray-50">
                                <option value="" class="text-black">Select Asset</option>
                            </select>
                        </div>

                        <!-- Document/Title -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-file-alt text-red-600 mr-2"></i>Document/Title <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="asset_allocations[${allocationCounter}][document_title]" required
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Document title or reference">
                        </div>

                        <!-- Address/Location -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-map-marker-alt text-red-600 mr-2"></i>Address/Location
                            </label>
                            <input type="text" name="asset_allocations[${allocationCounter}][address]"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="Asset location or address">
                        </div>

                        <!-- Description -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-info-circle text-red-600 mr-2"></i>Description
                            </label>
                            <textarea name="asset_allocations[${allocationCounter}][description]" rows="3"
                                      class="w-full px-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 resize-none bg-white text-black hover:bg-gray-50"
                                      placeholder="Asset description"></textarea>
                        </div>

                        <!-- Asset Value -->
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-dollar-sign text-red-600 mr-2"></i>Asset Value
                            </label>
                            <input type="number" name="asset_allocations[${allocationCounter}][value]" step="0.01"
                                   class="w-full px-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 bg-white text-black hover:bg-gray-50"
                                   placeholder="0.00">
                        </div>
                    </div>

                    <!-- Beneficiary Allocation -->
                    <div class="border-t-2 border-gray-200 pt-6">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white shadow-lg">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div>
                                    <h5 class="text-lg font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Beneficiary Allocation</h5>
                                    <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Add beneficiaries for this asset</p>
                                </div>
                            </div>
                            <button type="button" onclick="addBeneficiaryToAsset(${allocationCounter})" 
                                    class="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-300 font-medium text-sm shadow-lg">
                                <i class="fas fa-plus mr-2"></i>Add Beneficiary
                            </button>
                        </div>
                        
                        <div class="space-y-4" id="beneficiaryAllocations${allocationCounter}">
                            <!-- Beneficiaries will be added dynamically here -->
                        </div>
                        
                        <div class="mt-6 flex items-center justify-between p-4 bg-gray-50 rounded-xl">
                            <div class="flex items-center gap-3">
                                <div class="text-sm font-medium text-gray-700">Total Allocation:</div>
                                <div id="totalPercentage${allocationCounter}" class="text-lg font-bold text-red-600">0%</div>
                            </div>
                            <div class="text-xs text-gray-500 bg-white px-3 py-1 rounded-full">
                                <span id="maxAllocationLabel${allocationCounter}">Max: ${MAX_ALLOCATION_PERCENTAGE}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(newAllocation);
            
            // Initialize beneficiaries for new allocation
            assetBeneficiaries[allocationCounter] = [];
            
            // Initialize the asset dropdown after adding to DOM
            setTimeout(() => {
                updateSubCategories(allocationCounter);
            }, 100);
        }

        // Remove asset allocation
        function removeAssetAllocation(button) {
            const allocation = button.closest('.asset-allocation');
            const allocationIndex = Array.from(document.querySelectorAll('.asset-allocation')).indexOf(allocation);
            
            // Free up the selected asset from this allocation
            const subCategorySelect = allocation.querySelector(`select[name="asset_allocations[${allocationIndex}][sub_category]"]`);
            if (subCategorySelect) {
                const selectedAsset = subCategorySelect.getAttribute('data-previous-asset');
                if (selectedAsset && selectedAsset !== 'custom_new') {
                    selectedAssets.delete(parseInt(selectedAsset));
                }
            }
            
            allocation.remove();
            
            // Update all other dropdowns
            updateAllAssetDropdowns();
        }
    </script>

    <!-- Existing Assets Popup Modal -->
    <div id="existingAssetsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[80vh] overflow-hidden">
            <div class="bg-gradient-to-r from-purple-600 to-purple-700 text-white p-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                            <i class="fas fa-list text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold">Existing Assets</h3>
                            <p class="text-purple-100">Assets from client's profile</p>
                        </div>
                    </div>
                    <button type="button" onclick="closeExistingAssetsPopup()" 
                            class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center hover:bg-white/30 transition-colors">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            
            <div class="p-6 overflow-y-auto max-h-[60vh]">
                @if($client->assets->count() > 0)
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach($client->assets as $asset)
                            <div class="bg-gradient-to-br from-white to-gray-50 border-2 border-gray-200 rounded-xl p-4 shadow-md hover:shadow-lg transition-all duration-300">
                                <div class="flex items-start gap-3">
                                    <div class="w-10 h-10 bg-gradient-to-br from-purple-100 to-purple-200 rounded-lg flex items-center justify-center text-purple-600 flex-shrink-0">
                                        <i class="fas fa-cube"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <h4 class="font-bold text-gray-900 truncate">{{ $asset->name ?? $asset->title ?? $asset->type ?? 'Unnamed Asset' }}</h4>
                                        <p class="text-sm text-gray-600 mt-1">{{ $asset->description }}</p>
                                        <div class="flex items-center justify-between mt-3">
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                                {{ $asset->type }}
                                            </span>
                                            <span class="text-lg font-bold text-purple-600">
                                                RM {{ number_format($asset->value, 2) }}
                                            </span>
                                        </div>
                                        @if($asset->location)
                                            <div class="flex items-center gap-1 mt-2 text-xs text-gray-500">
                                                <i class="fas fa-map-marker-alt"></i>
                                                <span>{{ $asset->location }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-12">
                        <div class="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-inbox text-gray-400 text-3xl"></i>
                        </div>
                        <h4 class="text-xl font-bold text-gray-700 mb-2">No Existing Assets</h4>
                        <p class="text-gray-500">No assets found in client's profile. Please add assets first.</p>
                    </div>
                @endif
            </div>
            
            <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
                <div class="flex justify-end">
                    <button type="button" onclick="closeExistingAssetsPopup()" 
                            class="px-6 py-2 bg-gray-600 text-white rounded-xl hover:bg-gray-700 transition-colors font-medium">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function showExistingAssetsPopup() {
            document.getElementById('existingAssetsModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
        
        function closeExistingAssetsPopup() {
            document.getElementById('existingAssetsModal').classList.add('hidden');
            document.body.style.overflow = 'auto';
        }
        
        // Close modal when clicking outside
        document.getElementById('existingAssetsModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeExistingAssetsPopup();
            }
        });
        
        // Close modal with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeExistingAssetsPopup();
            }
        });

        // Form submission validation
        document.getElementById('assetsForm').addEventListener('submit', function(e) {
            const allAllocations = document.querySelectorAll('.asset-allocation');
            let hasError = false;
            let errorMessages = [];

            allAllocations.forEach((allocation, index) => {
                const allocationIndex = allocation.getAttribute('data-allocation');
                const totalDisplay = document.getElementById(`totalPercentage${allocationIndex}`);
                
                if (totalDisplay) {
                    // Get the ownership percentage for this asset
                    const ownershipPercentageInput = document.querySelector(`input[name="asset_allocations[${allocationIndex}][ownership_percentage]"]`);
                    const ownershipPercentage = ownershipPercentageInput ? parseFloat(ownershipPercentageInput.value) || 100 : 100;
                    
                    // Calculate max allocation based on both will type AND ownership percentage
                    const maxAllocationForThisAsset = (MAX_ALLOCATION_PERCENTAGE / 100) * ownershipPercentage;
                    
                    const totalText = totalDisplay.textContent.replace('%', '');
                    const total = parseFloat(totalText);
                    
                    // Allow small tolerance for floating point comparison
                    if (Math.abs(total - maxAllocationForThisAsset) > 0.1) {
                        hasError = true;
                        errorMessages.push(`Asset ${index + 1}: Total allocation is ${total}% (must be ${maxAllocationForThisAsset.toFixed(0)}%)`);
                    }
                }
            });

            if (hasError) {
                e.preventDefault();
                alert('Please fix the following errors before submitting:\n\n' + errorMessages.join('\n'));
                return false;
            }
        });
    </script>
@endsection