@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  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  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_id) }}" 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 Trust Details
                </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">Initial Value</p>
        <p class="text-lg font-bold text-gray-900">RM {{ number_format($trust->initial_value ?? 0, 2) }}</p>
    </div>
</div>

<!-- Quick Add from Client Assets -->
<script>
    console.log('Show 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 ?? 'other' }}', {{ $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_id) }}" 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 Trust Details
        </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 SHOW PAGE INITIALIZING ===');
        loadExistingAssets();
    });

    function loadExistingAssets() {
        const existingTrustAssets = @json($trust->assets ?? []);
        const clientAssets = @json($clientAssets ?? []);
        const container = document.getElementById('assetsContainer');
        
        console.log('=== LOAD EXISTING ASSETS DEBUG ===');
        console.log('existingTrustAssets count:', existingTrustAssets.length);
        console.log('clientAssets count:', clientAssets.length);
        
        if (clientAssets.length > 0) {
            console.log('Sample client asset structure:', clientAssets[0]);
            console.log('Available fields:', Object.keys(clientAssets[0]));
        }
        
        // Clear existing content
        container.innerHTML = '';
        
        if (existingTrustAssets.length > 0) {
            // Case 1: Trust already has saved assets - load them
            console.log('Loading', existingTrustAssets.length, 'saved trust assets');
            existingTrustAssets.forEach((asset, index) => {
                console.log(`Trust Asset ${index + 1}:`, asset);
                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('Creating forms for', clientAssets.length, 'client assets');
            
            clientAssets.forEach((clientAsset, index) => {
                console.log(`\n--- Processing Client Asset ${index + 1} ---`);
                console.log('Raw client asset:', clientAsset);
                
                // Extract category from multiple possible fields
                const rawCategory = clientAsset.asset_type || clientAsset.category || clientAsset.type || 'other';
                console.log('Raw category from client:', rawCategory);
                
                // Map to trust asset category
                const mappedCategory = mapClientAssetCategory(rawCategory);
                console.log('Mapped category:', mappedCategory);
                
                // Extract asset type/subcategory - try multiple fields
                const rawType = clientAsset.subcategory || clientAsset.type || clientAsset.asset_type || '';
                console.log('Raw type from client:', rawType);
                
                // If rawType matches the category name, try to get a more specific type
                let finalType = rawType;
                if (!finalType || finalType === rawCategory) {
                    // Try to infer from description or use first option
                    if (mappedCategory && assetCategories[mappedCategory] && assetCategories[mappedCategory].length > 0) {
                        // Use the first type as default
                        finalType = assetCategories[mappedCategory][0].toLowerCase().replace(/\s+/g, '_');
                        console.log('Using default type:', finalType);
                    }
                }
                
                const assetData = {
                    category: mappedCategory,  // Use 'category' not 'asset_category'
                    type: finalType,              // Use 'type' not 'asset_type'
                    account_or_registration_no: clientAsset.title_number || clientAsset.document_title || '',
                    current_value: parseFloat(clientAsset.value || clientAsset.market_value) || 0,
                    address: clientAsset.address || clientAsset.location || '',
                    description: clientAsset.description || `${rawCategory} - RM ${parseFloat(clientAsset.value || 0).toLocaleString('en-MY', { minimumFractionDigits: 2 })}`,
                    transfer_timing: 'immediately',
                    transfer_conditions: clientAsset.notes || ''
                };
                
                console.log('Final mapped asset data:', assetData);
                createAssetCard(assetData, index);
            });
            assetCounter = clientAssets.length + 1;
        } else {
            // Case 3: No saved trust assets and no client assets - create one empty form
            console.log('No assets found - creating empty Asset 1');
            createAssetCard(null, 0);
        }
    }

    // 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) {
        console.log(`createAssetCard called with index ${index}:`, asset);
        
        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  overflow-hidden';
        assetDiv.setAttribute('data-asset-index', index);
        
        // Get category value - handle both property names
        const categoryValue = asset?.asset_category || asset?.category || '';
        const typeValue = asset?.asset_type || asset?.type || '';
        
        console.log(`Asset ${index + 1} - Category: ${categoryValue}, Type: ${typeValue}`);
        
        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=" 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" ${(categoryValue === 'movable_assets' || categoryValue === 'movable_assets') ? 'selected' : ''}>Movable Assets</option>
                            <option value="non_movable_assets" ${(categoryValue === 'non_movable_assets' || categoryValue === 'non_movable_assets') ? 'selected' : ''}>Non Movable Assets</option>
                            <option value="digital_assets" ${(categoryValue === 'digital_assets' || categoryValue === 'digital_assets') ? 'selected' : ''}>Digital Assets</option>
                            <option value="monies_and_accounts" ${(categoryValue === 'monies_and_accounts' || categoryValue === 'monies_and_accounts') ? 'selected' : ''}>Monies and Accounts</option>
                            <option value="personal_assets" ${(categoryValue === 'personal_assets' || categoryValue === 'personal_assets') ? 'selected' : ''}>Personal Assets</option>
                            <option value="car_and_automobiles" ${(categoryValue === 'car_and_automobiles' || categoryValue === 'car_and_automobiles') ? 'selected' : ''}>Car and Automobiles</option>
                            <option value="other_assets" ${(categoryValue === 'other_assets' || categoryValue === 'other') ? '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"
                               placeholder="0.00">
                    </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 (categoryValue) {
            console.log(`Asset ${index} has categoryValue: ${categoryValue}, typeValue: ${typeValue}`);
            // Call updateAssetTypes immediately after DOM is ready
            setTimeout(() => {
                const categorySelect = document.querySelector(`select[name="assets[${index}][category]"]`);
                const typeSelect = document.querySelector(`select[name="assets[${index}][type]"]`);
                
                if (categorySelect && typeSelect) {
                    console.log(`Populating types for asset ${index}, category: ${categoryValue}`);
                    updateAssetTypes(index, typeValue);
                } else {
                    console.error(`Could not find selects for asset ${index}`);
                }
            }, 150);
        }
    }

    function updateAssetTypes(index, selectedType = null) {
        const categorySelect = document.querySelector(`select[name="assets[${index}][category]"]`);
        const typeSelect = document.querySelector(`select[name="assets[${index}][type]"]`);
        
        if (!categorySelect || !typeSelect) {
            console.error('updateAssetTypes: Could not find selects for index', index);
            return;
        }
        
        const category = categorySelect.value;
        console.log(`updateAssetTypes(${index}): category=${category}, selectedType=${selectedType}`);
        
        typeSelect.innerHTML = '<option value="">Select Type</option>';
        
        if (category && assetCategories[category]) {
            console.log(`Available types for ${category}:`, assetCategories[category]);
            assetCategories[category].forEach(type => {
                const option = document.createElement('option');
                const typeValue = type.toLowerCase().replace(/\s+/g, '_');
                option.value = typeValue;
                option.textContent = type;
                
                // Match against both the formatted value and original type name
                if (selectedType) {
                    const normalizedSelected = String(selectedType).toLowerCase().replace(/\s+/g, '_');
                    const normalizedType = type.toLowerCase().replace(/\s+/g, '_');
                    if (normalizedSelected === normalizedType || normalizedSelected === typeValue) {
                        option.selected = true;
                        console.log(`✓ Selected type: ${type} (matched with ${selectedType})`);
                    }
                }
                typeSelect.appendChild(option);
            });
            
            // If no type was selected but we have options, select the first one
            if (!selectedType && assetCategories[category].length > 0) {
                typeSelect.selectedIndex = 1; // Select first actual option (skip "Select Type")
                console.log(`Auto-selected first type: ${assetCategories[category][0]}`);
            }
        }
    }

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