@extends('layouts.portal')

@section('title', 'Trust Assets')
@section('page_title', 'Trust Assets')
@section('page_subtitle', 'Manage Assets')

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

@section('content')
<div class="bg-gradient-to-r from-[#772B10] via-[#8B3D15] to-[#9F4F1A] border-b border-[#772B10] p-8 relative overflow-hidden">
    <!-- 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-vault text-white text-2xl"></i>
                </div>
                <div>
                    <h1 class="text-3xl font-semibold text-white tracking-wide" style="font-family: 'Inter', sans-serif;">Trust Assets</h1>
                    <p class="text-white/80 mt-1" style="font-family: 'Inter', sans-serif;">{{ $trust->trust_name }} - Manage Assets</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('agent.trusts.step2', $trust->client) }}" class="px-6 py-3 bg-white/20 text-white rounded-xl hover:bg-white/30 transition-all font-medium border border-white/30">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Step 2
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Breadcrumb -->
<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;">
        <a href="{{ route('agent.trusts.index') }}" class="hover:text-gray-900">Trusts</a>
        <i class="fas fa-chevron-right mx-2 text-xs"></i>
        <span class="text-gray-900">{{ $trust->trust_name }} - Assets</span>
    </div>
</div>

<!-- Trust Summary -->
<div class="mx-8 mb-6 grid grid-cols-1 md:grid-cols-4 gap-4">
    <div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-4">
        <p class="text-sm text-gray-600">Trust Type</p>
        <p class="text-lg font-bold text-gray-900">{{ ucfirst(str_replace('_', ' ', $trust->trust_type)) }}</p>
    </div>
    <div class="bg-green-50 border-l-4 border-green-500 rounded-lg p-4">
        <p class="text-sm text-gray-600">Status</p>
        <p class="text-lg font-bold">
            @if($trust->status === 'pending_review')
                <span class="badge bg-warning">Pending Review</span>
            @elseif($trust->status === 'approved')
                <span class="badge bg-success">Approved</span>
            @else
                <span class="badge bg-secondary">{{ ucfirst($trust->status) }}</span>
            @endif
        </p>
    </div>
    <div class="bg-purple-50 border-l-4 border-purple-500 rounded-lg p-4">
        <p class="text-sm text-gray-600">Creation Date</p>
        <p class="text-lg font-bold text-gray-900">{{ \Carbon\Carbon::parse($trust->creation_date)->format('d M Y') }}</p>
    </div>
    <div class="bg-orange-50 border-l-4 border-orange-500 rounded-lg p-4">
        <p class="text-sm text-gray-600">Total Assets Value</p>
        <p class="text-lg font-bold text-gray-900">RM <span id="totalValue">0.00</span></p>
    </div>
</div>

<!-- Quick Add from Client Assets -->
<script>
    console.log('Asset View Debug:', {
        clientAssets: @json($clientAssets ?? 'NOT PASSED'),
        clientAssetsIsset: {{ isset($clientAssets) ? 'true' : 'false' }},
        clientAssetsCount: {{ isset($clientAssets) ? $clientAssets->count() : '0' }},
        trustId: {{ $trust->id }},
        clientId: {{ $trust->client_id }}
    });
</script>

@if(isset($clientAssets) && $clientAssets->count() > 0)
<div class="mx-8 mb-8 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-xl shadow-md">
    <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                <i class="fas fa-lightbulb text-white text-lg"></i>
            </div>
            <div>
                <h4 class="text-lg font-bold text-gray-900">Quick Add Client Assets</h4>
                <p class="text-sm text-blue-700">Click any asset below to quickly add it to the trust (Found: {{ $clientAssets->count() }} assets)</p>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        @foreach($clientAssets as $asset)
        <button type="button" onclick="addClientAsset({{ $asset->id }}, '{{ $asset->asset_type ?? $asset->category ?? 'Asset' }}', {{ $asset->value ?? 0 }}, '{{ str_replace("'", "\\'", $asset->address ?? '') }}')" class="text-left px-4 py-3 bg-white border-2 border-blue-300 rounded-lg hover:bg-blue-100 hover:border-blue-500 hover:shadow-md transition-all group">
            <div class="font-semibold text-gray-900 group-hover:text-blue-700 flex items-center justify-between">
                <span>{{ ucfirst($asset->asset_type ?? ($asset->category ? str_replace('_', ' ', $asset->category) : 'Asset')) }}</span>
                <i class="fas fa-plus text-blue-600 group-hover:text-blue-800"></i>
            </div>
            <div class="text-xs text-gray-600 mt-1">Value: <span class="font-semibold">RM {{ number_format($asset->value ?? 0, 2) }}</span></div>
            @if($asset->address)
            <div class="text-xs text-gray-500 mt-1">📍 {{ substr($asset->address, 0, 30) }}{{ strlen($asset->address) > 30 ? '...' : '' }}</div>
            @endif
        </button>
        @endforeach
    </div>
</div>
@elseif(isset($clientAssets))
<div class="mx-8 mb-8 p-6 bg-gradient-to-r from-amber-50 to-orange-50 border-2 border-amber-200 rounded-xl shadow-md">
    <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-amber-600 rounded-lg flex items-center justify-center">
            <i class="fas fa-info-circle text-white text-lg"></i>
        </div>
        <div>
            <h4 class="text-lg font-bold text-gray-900">No Client Assets Found</h4>
            <p class="text-sm text-amber-700">Client ID: {{ $trust->client_id }} | This client hasn't added any assets yet. You can add them manually below or go to client profile to add assets first.</p>
            <a href="{{ route('agent.clients.show', $trust->client_id) }}" class="text-sm text-amber-800 underline hover:text-amber-900 mt-2 inline-block">
                <i class="fas fa-external-link-alt mr-1"></i>View Client Profile & Add Assets
            </a>
        </div>
    </div>
</div>
@endif

<!-- Assets Management -->
<form action="{{ route('agent.trusts.assets.store', $trust->id) }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 mx-8 mb-8" id="assetsForm">
    @csrf
    <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-coins text-white text-xl"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-gray-700" style="font-family: 'Inter', sans-serif;">Trust Assets</h3>
                    <p class="text-gray-600 text-lg" style="font-family: 'Inter', sans-serif;">List all property, money, and assets being passed to this trust</p>
                </div>
            </div>
            <button type="button" onclick="addNewAsset()" 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="trust_id" value="{{ $trust->id }}">
        </div>

        <!-- Assets Container -->
        <div class="space-y-6" id="assetsContainer">
            <!-- Assets will be added here -->
        </div>
    </div>

    <!-- Form Actions -->
    <div class="flex flex-col md:flex-row gap-4 justify-between border-t pt-6">
        <a href="{{ route('agent.trusts.step2', $trust->client) }}" 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 Step 2
        </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 Assets
        </button>
    </div>
</form>

<!-- Asset Categories Info -->
<script>
let assetCounter = 1;

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']
};

document.addEventListener('DOMContentLoaded', function() {
    console.log('=== TRUST ASSETS PAGE INITIALIZING ===');
    loadExistingAssets();
});

function loadExistingAssets() {
    const existingTrustAssets = @json($trust->assets ?? []);
    const clientAssets = @json($clientAssets ?? []);
    const container = document.getElementById('assetsContainer');
    
    console.log('DEBUG: existingTrustAssets.length:', existingTrustAssets.length);
    console.log('DEBUG: clientAssets.length:', clientAssets.length);
    
    // Clear existing content
    container.innerHTML = '';
    
    if (existingTrustAssets.length > 0) {
        // Case 1: Trust already has saved assets - load them
        console.log('DEBUG: Loading', existingTrustAssets.length, 'saved trust assets');
        existingTrustAssets.forEach((asset, index) => {
            createAssetCard(asset, index);
        });
        assetCounter = existingTrustAssets.length + 1;
    } else if (clientAssets.length > 0) {
        // Case 2: No saved trust assets, but client has assets - auto-create forms with pre-filled data
        console.log('DEBUG: No saved trust assets, creating forms for', clientAssets.length, 'client assets');
        clientAssets.forEach((clientAsset, index) => {
            const assetData = {
                category: mapClientAssetCategory(clientAsset.asset_type || clientAsset.category || 'other'),
                type: clientAsset.type || '',
                account_or_registration_no: clientAsset.title_number || clientAsset.document_title || '',
                current_value: parseFloat(clientAsset.value) || 0,
                address: clientAsset.address || clientAsset.location || '',
                description: clientAsset.description || `${clientAsset.asset_type || clientAsset.category || 'Asset'} - RM ${parseFloat(clientAsset.value || 0).toLocaleString('en-MY', { minimumFractionDigits: 2 })}`,
                transfer_timing: '',
                transfer_conditions: ''
            };
            createAssetCard(assetData, index);
        });
        assetCounter = clientAssets.length + 1;
    } else {
        // Case 3: No saved trust assets and no client assets - create one empty form
        console.log('DEBUG: No saved assets and no client assets - creating empty Asset 1');
        createAssetCard(null, 0);
    }
    
    updateTotalValue();
}

// Map client asset categories to trust asset categories
function mapClientAssetCategory(clientCategory) {
    // Normalize input: convert to lowercase and trim
    const normalizedCategory = (clientCategory || '').toString().toLowerCase().trim();
    
    const categoryMapping = {
        // Direct mappings (lowercase)
        'movable_assets': 'movable_assets',
        'movable assets': 'movable_assets',
        'non_movable_assets': 'non_movable_assets',
        'non movable assets': 'non_movable_assets',
        'immovable_assets': 'non_movable_assets',
        'immovable assets': 'non_movable_assets',
        'financial_assets': 'monies_and_accounts',
        'financial assets': 'monies_and_accounts',
        'monies_and_accounts': 'monies_and_accounts',
        'monies and accounts': 'monies_and_accounts',
        'car_and_automobiles': 'car_and_automobiles',
        'car and automobiles': 'car_and_automobiles',
        'personal_assets': 'personal_assets',
        'personal assets': 'personal_assets',
        'digital_assets': 'digital_assets',
        'digital assets': 'digital_assets',
        'business': 'other_assets',
        'business assets': 'other_assets',
        'other': 'other_assets',
        'other_assets': 'other_assets',
        'other assets': 'other_assets',
        // Specific asset type mappings (lowercase)
        'house': 'non_movable_assets',
        'apartment': 'non_movable_assets',
        'land': 'non_movable_assets',
        'commercial property': 'non_movable_assets',
        'condominium': 'non_movable_assets',
        'car': 'car_and_automobiles',
        'motorcycle': 'car_and_automobiles',
        'truck': 'car_and_automobiles',
        'boat': 'car_and_automobiles',
        'aircraft': 'car_and_automobiles',
        'savings account': 'monies_and_accounts',
        'current account': 'monies_and_accounts',
        'fixed deposit': 'monies_and_accounts',
        'cryptocurrency': 'digital_assets',
        'digital art': 'digital_assets',
        'jewelry': 'movable_assets',
        'electronics': 'movable_assets',
        'furniture': 'movable_assets',
        'art': 'movable_assets',
        'collectibles': 'movable_assets'
    };
    
    const mapped = categoryMapping[normalizedCategory];
    
    // Debug log
    console.log('mapClientAssetCategory:', {
        input: clientCategory,
        normalized: normalizedCategory,
        mapped: mapped || 'other_assets (default)'
    });
    
    return mapped || 'other_assets';
}

function addNewAsset() {
    createAssetCard(null, assetCounter);
    assetCounter++;
}

// Add client asset with pre-filled data
function addClientAsset(assetId, category, value, address) {
    console.log('addClientAsset called:', { assetId, category, value, address });
    
    // Use the mapClientAssetCategory function
    let formCategory = mapClientAssetCategory(category);
    
    const assetData = {
        category: formCategory,
        type: '',  // Will be empty, user can select
        account_or_registration_no: '',
        current_value: parseFloat(value) || 0,
        address: address || '',
        description: `Client Asset (${category}): RM ${parseFloat(value).toLocaleString('en-MY', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
        transfer_timing: '',
        transfer_conditions: ''
    };
    
    console.log('Creating asset card with mapped data:', assetData);
    createAssetCard(assetData, assetCounter);
    assetCounter++;
    
    // Scroll to the new asset and trigger category change
    setTimeout(() => {
        const cards = document.querySelectorAll('.asset-card');
        if (cards.length > 0) {
            const lastCard = cards[cards.length - 1];
            lastCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
            // Trigger the onchange to populate types
            const categorySelect = lastCard.querySelector('select[name*="[category]"]');
            if (categorySelect) {
                categorySelect.dispatchEvent(new Event('change', { bubbles: true }));
            }
        }
    }, 100);
}

function createAssetCard(asset, index) {
    const container = document.getElementById('assetsContainer');
    const assetDiv = document.createElement('div');
    assetDiv.className = 'bg-gradient-to-br from-white to-gray-50 border-2 border-gray-200 rounded-2xl p-8 shadow-lg asset-card relative overflow-hidden';
    assetDiv.setAttribute('data-asset-index', index);
    
    assetDiv.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>
        
        <div class="relative z-10">
            <div class="flex items-center justify-between mb-6">
                <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 font-bold">${index + 1}</div>
                    <h4 class="text-lg font-bold text-gray-900">Asset ${index + 1}</h4>
                </div>
                <button type="button" onclick="removeAsset(this)" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium transition-colors">
                    <i class="fas fa-trash mr-1"></i>Remove
                </button>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Asset Category -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-list text-red-600 mr-2"></i>Asset Category <span class="text-red-500">*</span>
                    </label>
                    <select name="assets[${index}][category]" required onchange="updateAssetTypes(${index})"
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none bg-white text-gray-900 font-medium hover:border-gray-400 transition-all">
                        <option value="">Select Category</option>
                        <option value="movable_assets" ${(asset?.category === 'movable_assets' || asset?.asset_category === 'movable_assets') ? 'selected' : ''}>Movable Assets</option>
                        <option value="non_movable_assets" ${(asset?.category === 'non_movable_assets' || asset?.asset_category === 'non_movable_assets') ? 'selected' : ''}>Non Movable Assets</option>
                        <option value="digital_assets" ${(asset?.category === 'digital_assets' || asset?.asset_category === 'digital_assets') ? 'selected' : ''}>Digital Assets</option>
                        <option value="monies_and_accounts" ${(asset?.category === 'monies_and_accounts' || asset?.asset_category === 'monies_and_accounts') ? 'selected' : ''}>Monies and Accounts</option>
                        <option value="personal_assets" ${(asset?.category === 'personal_assets' || asset?.asset_category === 'personal_assets') ? 'selected' : ''}>Personal Assets</option>
                        <option value="car_and_automobiles" ${(asset?.category === 'car_and_automobiles' || asset?.asset_category === 'car_and_automobiles') ? 'selected' : ''}>Car and Automobiles</option>
                        <option value="other_assets" ${(asset?.category === 'other_assets' || asset?.asset_category === 'other_assets') ? 'selected' : ''}>Other Assets</option>
                    </select>
                </div>
                
                <!-- Asset Type -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-cube text-red-600 mr-2"></i>Asset Type <span class="text-red-500">*</span>
                    </label>
                    <select name="assets[${index}][type]" required
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none bg-white text-gray-900 font-medium hover:border-gray-400 transition-all asset-type-select">
                        <option value="">Select Type</option>
                    </select>
                </div>
                
                <!-- Account/Registration Number -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-certificate text-red-600 mr-2"></i>Account/Registration Number
                    </label>
                    <input type="text" name="assets[${index}][account_number]"
                        value="${asset?.account_or_registration_no || ''}"
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none bg-white text-gray-900 font-medium hover:border-gray-400 transition-all"
                        placeholder="e.g., ABC123456789">
                </div>
                
                <!-- Current Value -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-dollar-sign text-red-600 mr-2"></i>Current Value (RM) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" name="assets[${index}][current_value]" required step="0.01"
                        value="${asset?.current_value || ''}"
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none bg-white text-gray-900 font-medium hover:border-gray-400 transition-all asset-value"
                        placeholder="0.00"
                        onchange="updateTotalValue()">
                </div>
                
                <!-- Location/Address -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-map-marker-alt text-red-600 mr-2"></i>Location/Address where asset is located
                    </label>
                    <input type="text" name="assets[${index}][address]"
                        value="${asset?.address || ''}"
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none bg-white text-gray-900 font-medium hover:border-gray-400 transition-all"
                        placeholder="Asset location or address">
                </div>
                
                <!-- Transfer Timing -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-clock text-red-600 mr-2"></i>When can property be transferred? <span class="text-red-500">*</span>
                    </label>
                    <select name="assets[${index}][transfer_timing]" required
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none bg-white text-gray-900 font-medium hover:border-gray-400 transition-all">
                        <option value="">Select Timing</option>
                        <option value="upon_demise" ${asset?.transfer_timing === 'upon_demise' ? 'selected' : ''}>Upon my demise (Will only)</option>
                        <option value="immediately" ${asset?.transfer_timing === 'immediately' ? 'selected' : ''}>Immediately (Trust)</option>
                        <option value="at_maturity" ${asset?.transfer_timing === 'at_maturity' ? 'selected' : ''}>At maturity of the asset</option>
                    </select>
                </div>
                
                <!-- Description (Full Width) -->
                <div class="lg:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-pen text-red-600 mr-2"></i>Full Description of Asset <span class="text-red-500">*</span>
                    </label>
                    <textarea name="assets[${index}][description]" required rows="5"
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none resize-none bg-white text-gray-900 font-medium hover:border-gray-400 transition-all"
                        placeholder="Provide full details about this asset">${asset?.description || ''}</textarea>
                </div>
                
                <!-- Transfer Conditions (Full Width) -->
                <div class="lg:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-file-alt text-red-600 mr-2"></i>Transfer Conditions
                    </label>
                    <textarea name="assets[${index}][transfer_conditions]" rows="4"
                        class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-red-500 focus:ring-2 focus:ring-red-200 outline-none resize-none bg-white text-gray-900 font-medium hover:border-gray-400 transition-all"
                        placeholder="Any special conditions for asset transfer">${asset?.transfer_conditions || ''}</textarea>
                </div>
            </div>
        </div>
    `;
    
    container.appendChild(assetDiv);
    
    // Update asset types if category has value
    if (asset?.category || asset?.asset_category) {
        setTimeout(() => {
            updateAssetTypes(index, asset.type || asset.asset_type);
        }, 100);
    }
}

function updateAssetTypes(index, selectedType = null) {
    const categorySelect = document.querySelector(`select[name="assets[${index}][category]"]`);
    const typeSelect = document.querySelector(`select[name="assets[${index}][type]"]`);
    const category = categorySelect.value;
    
    typeSelect.innerHTML = '<option value="">Select Type</option>';
    
    if (category && assetCategories[category]) {
        assetCategories[category].forEach(type => {
            const option = document.createElement('option');
            option.value = type.toLowerCase().replace(/\s+/g, '_');
            option.textContent = type;
            if (selectedType && option.value === selectedType) option.selected = true;
            typeSelect.appendChild(option);
        });
    }
}

function removeAsset(button) {
    if (document.querySelectorAll('.asset-card').length > 1) {
        button.closest('.asset-card').remove();
        updateTotalValue();
    } else {
        alert('You must have at least one asset');
    }
}

function updateTotalValue() {
    const values = Array.from(document.querySelectorAll('.asset-value'))
        .map(input => parseFloat(input.value) || 0)
        .reduce((sum, val) => sum + val, 0);
    
    document.getElementById('totalValue').textContent = values.toLocaleString('en-MY', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
</script>

@endsection