@extends('layouts.portal')

@section('title', 'My Assets')
@section('page_title', 'Step 4: Assets')
@section('page_subtitle', 'Record your properties, bank accounts, investments, and other assets')

@section('sidebar')
    @include('client.partials.onboarding-sidebar', ['step' => 4])
@endsection

@section('content')
    <!-- Edit Access Banner -->
    @if(!$hasEditAccess)
    <div class="max-w-6xl mx-auto p-6 mb-6">
        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-lock text-yellow-600"></i>
                </div>
                <div>
                    <p class="font-semibold text-yellow-800">Read-Only Mode</p>
                    <p class="text-sm text-yellow-600">Your assets are in read-only mode. To edit, you need to request edit access.</p>
                </div>
            </div>
            <a href="{{ route('client.edit.request', ['section' => 'assets']) }}" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors font-medium">
                <i class="fas fa-unlock mr-2"></i>Request Edit Access
            </a>
        </div>
    </div>
    @else
    <div class="max-w-6xl mx-auto p-6 mb-6">
        <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-unlock text-green-600"></i>
                </div>
                <div>
                    <p class="font-semibold text-green-800">Edit Access Active</p>
                    <p class="text-sm text-green-600">You can edit your assets until {{ $editRequest->edit_access_expires_at->format('d M Y, g:i A') }}</p>
                </div>
            </div>
        </div>
    </div>
    @endif

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        }
        
        body {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            min-height: 100vh;
        }
        
        .form-label {
            font-weight: 600;
            color: #1f2937;
            font-size: 0.85rem;
            letter-spacing: -0.025em;
        }
        
        .form-input {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.85rem;
            font-weight: 400;
            letter-spacing: -0.01em;
            height: 52px !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
        }
        
        input[type="file"] {
            height: 52px !important;
            line-height: 52px !important;
            display: flex !important;
            align-items: flex-end !important;
            justify-content: flex-start !important;
            text-align: left !important;
            padding: 8px 1.25rem !important;
            font-size: 0.75rem !important;
            font-weight: 500 !important;
            letter-spacing: -0.01em !important;
            border: none !important;
            background: #f9fafb !important;
            border-radius: 12px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        input[type="file"]::-webkit-file-upload-button {
            border: none !important;
            background: transparent !important;
            color: #1f2937 !important;
            font-weight: 600 !important;
            font-size: 0.75rem !important;
            padding: 6px 12px !important;
            border-radius: 6px !important;
            transition: all 0.3s ease !important;
        }
        
        input[type="file"]::-webkit-file-upload-button:hover {
            background: #991b1b !important;
            color: white !important;
        }
        
        input[type="file"]:hover {
            border-color: #991b1b !important;
            background: #ffffff !important;
        }
        
        input[type="file"]:focus {
            border-color: #991b1b !important;
            box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.1) !important;
            background: #ffffff !important;
        }
        
        .form-input:focus {
            border-color: #991b1b !important;
            box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.1) !important;
        }
        
        .form-select {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.85rem;
            font-weight: 400;
            letter-spacing: -0.01em;
            height: 52px !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        
        .form-select:focus {
            border-color: #991b1b !important;
            box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.1) !important;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
            color: white !important;
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            font-size: 15px !important;
            height: 48px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            letter-spacing: -0.025em;
        }
        
        .btn-secondary {
            border-radius: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            font-size: 15px !important;
            height: 48px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            background: #ffffff !important;
            border: 2px solid #991b1b !important;
            color: #991b1b !important;
            letter-spacing: -0.025em;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 25px rgba(153, 27, 27, 0.35) !important;
            background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
        }
        
        .card-container {
            border-radius: 20px !important;
            box-shadow: 0 20px 80px rgba(0, 0, 0, 0.12) !important;
            background: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            backdrop-filter: blur(10px) !important;
        }
        
        .progress-step {
            border-radius: 16px !important;
            font-family: 'Inter', sans-serif !important;
            font-weight: 700 !important;
            font-size: 15px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            width: 56px !important;
            height: 56px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
        }
        
        .progress-step.current {
            background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
            color: white !important;
            border: 3px solid #991b1b !important;
            animation: pulse 2s infinite;
        }
        
        .progress-step.completed {
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
            color: white !important;
            box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4) !important;
        }
        
        .asset-entry {
            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
            border-radius: 20px !important;
            padding: 32px !important;
            margin-bottom: 2rem !important;
            position: relative !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
        }
        
        .asset-entry:hover {
            box-shadow: 0 20px 60px rgba(153, 27, 27, 0.15) !important;
            transform: translateY(-5px) !important;
            border-color: rgba(153, 27, 27, 0.2) !important;
        }
        
        .add-asset-btn {
            background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%) !important;
            border: 2px solid #991b1b !important;
            border-radius: 8px !important;
            padding: 8px 28px !important;
            color: white !important;
            font-weight: 600 !important;
            font-family: 'Inter', sans-serif !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            font-size: 14px !important;
            box-shadow: 0 4px 15px rgba(153, 27, 27, 0.15) !important;
            position: relative !important;
            overflow: hidden !important;
            max-width: 450px !important;
            margin: 0 auto !important;
            display: flex !important;
            text-align: center !important;
            justify-content: center !important;
            align-items: center !important;
            line-height: 1 !important;
            height: 40px !important;
        }
        
        .add-asset-btn::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: -100% !important;
            width: 100% !important;
            height: 100% !important;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important;
            transition: left 0.5s !important;
        }
        
        .add-asset-btn:hover::before {
            left: 100% !important;
        }
        
        .add-asset-btn:hover {
            background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
            border-color: #dc2626 !important;
            color: white !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 20px rgba(153, 27, 27, 0.25) !important;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(153, 27, 27, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(153, 27, 27, 0); }
            100% { box-shadow: 0 0 0 0 rgba(153, 27, 27, 0); }
        }
    </style>
    
    <div class="max-w-6xl mx-auto p-6">
        <!-- Session Status Indicator -->
        <div id="session-status" class="mb-6 bg-white/80 backdrop-blur-md border border-green-200/50 rounded-xl p-4 text-sm text-green-800 hidden shadow-lg">
            <div class="flex items-center">
                <svg class="w-5 h-5 mr-3 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                </svg>
                <span id="session-message">Session active</span>
            </div>
        </div>
        
        <!-- Modern Progress Steps -->
        <div class="mb-8 bg-white/90 backdrop-blur-xl rounded-2xl shadow-2xl p-8 border border-white/20">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-600 to-green-800 flex items-center justify-center text-white font-bold shadow-xl progress-step completed">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900 form-label">Personal</p>
                        <p class="text-xs text-green-700 font-medium">Completed</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gradient-to-r from-green-600 to-gray-300 mx-6"></div>
                <div class="flex items-center">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-600 to-green-800 flex items-center justify-center text-white font-bold shadow-xl progress-step completed">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900 form-label">Family</p>
                        <p class="text-xs text-green-700 font-medium">Completed</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gradient-to-r from-green-600 to-gray-300 mx-6"></div>
                <div class="flex items-center">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-600 to-green-800 flex items-center justify-center text-white font-bold shadow-xl progress-step completed">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900 form-label">KYC</p>
                        <p class="text-xs text-green-700 font-medium">Completed</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gradient-to-r from-green-600 to-gray-300 mx-6"></div>
                <div class="flex items-center">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-red-600 to-red-800 flex items-center justify-center text-white font-bold shadow-xl progress-step current">
                        <span class="text-lg font-bold">4</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900 form-label">Assets</p>
                        <p class="text-xs text-red-700 font-medium">Current step</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gradient-to-r from-red-600 to-gray-300 mx-6"></div>
                <div class="flex items-center opacity-60">
                    <div class="w-14 h-14 rounded-2xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold progress-step">
                        <span class="text-lg font-bold">5</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-700">Liabilities</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gray-300 mx-6"></div>
                <div class="flex items-center opacity-60">
                    <div class="w-14 h-14 rounded-2xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold progress-step">
                        <span class="text-lg font-bold">6</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-700">Will</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modern Form Card -->
        <div class="bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/30 overflow-hidden card-container">
            <div class="bg-gradient-to-r from-red-700 via-red-800 to-red-900 px-8 py-6 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
                <div class="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full blur-2xl -ml-12 -mb-12"></div>
                <div class="relative z-10">
                    <h3 class="text-2xl font-bold text-white flex items-center" style="font-family: 'Inter', sans-serif;">
                        <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                        Asset Creation
                    </h3>
                    <p class="text-red-100 text-sm mt-2" style="font-family: 'Inter', sans-serif;">Please provide details of all your assets including properties, bank accounts, investments, and business interests.</p>
                </div>
            </div>
            
            <form action="{{ route('client.assets.store') }}" method="POST" enctype="multipart/form-data" class="p-8">
                @csrf
                
                <div class="mb-8">
                    <div class="bg-red-50/80 backdrop-blur-sm border border-red-200/50 rounded-xl p-6 shadow-lg">
                        <div class="flex items-start">
                            <svg class="w-6 h-6 text-red-600 mt-1 mr-4" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                            </svg>
                            <div>
                                <h4 class="font-semibold text-red-800 mb-2 form-label">Asset Details</h4>
                                <p class="text-sm text-red-700">Please provide details of all your assets including properties, bank accounts, investments, insurance policies, and business interests. This information will be used for will preparation.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="assetsContainer">
                    <!-- Display Existing Assets -->
                    @if(!empty($existingAssets))
                        @foreach($existingAssets as $index => $asset)
                            <div class="asset-entry">
                                <div class="flex justify-between items-center mb-6">
                                    <h4 class="text-xl font-bold text-gray-900 flex items-center">
                                        <svg class="w-6 h-6 mr-3 text-red-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                        </svg>
                                        Asset #{{ $index + 1 }}
                                    </h4>
                                    <button type="button" class="text-red-500 hover:text-red-700 remove-asset-btn flex items-center">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                                        </svg>
                                        Remove
                                    </button>
                                </div>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                    <div class="group">
                                        <label class="form-label">
                                            Asset Type <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <!-- Hidden input to store selected asset type -->
                                            <input type="hidden" name="assets[{{ $index }}][type]" value="{{ $asset['type'] ?? '' }}" required>

                                            <!-- Display field showing selected asset type -->
                                            <div class="form-input w-full border-2 border-gray-200 rounded-xl bg-gray-100 text-gray-700 font-medium"
                                                 style="padding-left: 1.25rem; padding-right: 1.25rem; min-height: 52px; display: flex; align-items: center;">
                                                {{ $asset['type'] ? ucfirst(str_replace('_', ' ', $asset['type'])) : 'Asset type not set' }}
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="group">
                                        <label class="form-label">
                                            Ownership Type <span class="text-red-500">*</span>
                                        </label>
                                        <div class="relative">
                                            <select name="assets[{{ $index }}][ownership_type]" required 
                                                    class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900"
                                                    style="padding-left: 1.25rem; padding-right: 2.5rem;">
                                                <option value="single" {{ $asset['ownership_type'] == 'single' ? 'selected' : '' }}>👤 Single Ownership</option>
                                                <option value="joint" {{ $asset['ownership_type'] == 'joint' ? 'selected' : '' }}>👥 Joint Ownership</option>
                                            </select>
                                            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="md:col-span-2 group">
                                        <label class="form-label">
                                            Description <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" name="assets[{{ $index }}][description]" required 
                                               value="{{ $asset['description'] ?? '' }}"
                                               class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                               placeholder="e.g., Terrace house at Taman Desa, KL"
                                               style="padding-left: 1.25rem; padding-right: 1.25rem;">
                                    </div>
                                    
                                    <div class="group">
                                        <label class="form-label">
                                            Approximate Value (RM)
                                        </label>
                                        <div class="relative">
                                            <input type="number" name="assets[{{ $index }}][value]" step="0.01" min="0"
                                                   value="{{ $asset['value'] ?? '' }}"
                                                   class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                   placeholder="0.00"
                                                   style="padding-left: 1.25rem; padding-right: 1.25rem;">
                                        </div>
                                    </div>
                                    
                                    <div class="group">
                                        <label class="form-label">
                                            Supporting Document
                                        </label>
                                        <div class="relative">
                                            <input type="file" name="assets[{{ $index }}][document]" accept=".pdf,.jpg,.jpeg,.png"
                                                   class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900"
                                                   style="padding: 8px 1.25rem; height: 52px; display: flex; align-items: center; justify-content: flex-start;">
                                        </div>
                                        @if(isset($asset['document']) && !empty($asset['document']))
                                            <p class="text-sm text-gray-600 mt-2">Current: {{ $asset['document'] }}</p>
                                        @endif
                                    </div>
                                    
                                    <div class="md:col-span-2 group">
                                        <label class="form-label">
                                            Additional Notes
                                        </label>
                                        <textarea name="assets[{{ $index }}][notes]" rows="2" 
                                                  class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white resize-none text-gray-900 placeholder-gray-500"
                                                  placeholder="Any additional details about this asset..."
                                                  style="padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem; padding-bottom: 1rem;">{{ $asset['notes'] ?? '' }}</textarea>
                                    </div>
                                    
                                    <!-- Conditional Fields Based on Asset Type -->
                                    <div class="md:col-span-2 conditional-fields" data-asset-type="{{ $asset['type'] ?? '' }}">
                                        <!-- Property Specific Fields -->
                                        <div class="property-fields grid grid-cols-1 md:grid-cols-2 gap-8" style="display: none;">
                                            <div class="group">
                                                <label class="form-label">Property Address</label>
                                                <input type="text" name="assets[{{ $index }}][address]" 
                                                       value="{{ $asset['address'] ?? '' }}"
                                                       class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                       placeholder="Full property address">
                                            </div>
                                            <div class="group">
                                                <label class="form-label">Title Number</label>
                                                <input type="text" name="assets[{{ $index }}][title_number]" 
                                                       value="{{ $asset['title_number'] ?? '' }}"
                                                       class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                       placeholder="Title/Deed number">
                                            </div>
                                        </div>
                                        
                                        <!-- Bank Account Specific Fields -->
                                        <div class="bank-fields grid grid-cols-1 md:grid-cols-2 gap-8" style="display: none;">
                                            <div class="group">
                                                <label class="form-label">Bank Name</label>
                                                <input type="text" name="assets[{{ $index }}][bank_name]" 
                                                       value="{{ $asset['bank_name'] ?? '' }}"
                                                       class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                       placeholder="Bank name">
                                            </div>
                                            <div class="group">
                                                <label class="form-label">Account Number</label>
                                                <input type="text" name="assets[{{ $index }}][account_number]" 
                                                       value="{{ $asset['account_number'] ?? '' }}"
                                                       class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                       placeholder="Bank account number">
                                            </div>
                                        </div>
                                        
                                        <!-- Investment Specific Fields -->
                                        <div class="investment-fields grid grid-cols-1 md:grid-cols-2 gap-8" style="display: none;">
                                            <div class="group">
                                                <label class="form-label">Investment Type</label>
                                                <select name="assets[{{ $index }}][investment_type]" 
                                                        class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900"
                                                        style="padding-left: 1.25rem; padding-right: 2.5rem;">
                                                    <option value="">Select investment type</option>
                                                    <option value="shares">Shares</option>
                                                    <option value="unit_trust">Unit Trust</option>
                                                    <option value="mutual_fund">Mutual Fund</option>
                                                    <option value="bonds">Bonds</option>
                                                </select>
                                            </div>
                                            <div class="group">
                                                <label class="form-label">Stock/Broker Name</label>
                                                <input type="text" name="assets[{{ $index }}][broker_name]" 
                                                       value="{{ $asset['broker_name'] ?? '' }}"
                                                       class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                       placeholder="Stock broker or investment company">
                                            </div>
                                        </div>
                                        
                                        
                                        <div class="insurance-fields grid grid-cols-1 md:grid-cols-2 gap-8" style="display: none;">
                                            <div class="group">
                                                <label class="form-label">Policy Number</label>
                                                <input type="text" name="assets[{{ $index }}][policy_number]" 
                                                       value="{{ $asset['policy_number'] ?? '' }}"
                                                       class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                       placeholder="Insurance policy number">
                                            </div>
                                            <div class="group">
                                                <label class="form-label">Insurance Company</label>
                                                <input type="text" name="assets[{{ $index }}][insurance_company]" 
                                                       value="{{ $asset['insurance_company'] ?? '' }}"
                                                       class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                       placeholder="Insurance company name">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <!-- New Asset Entry Template -->
                        <div class="asset-entry">
                            <div class="flex justify-between items-center mb-6">
                                <h4 class="text-xl font-bold text-gray-900 flex items-center">
                                    <svg class="w-6 h-6 mr-3 text-red-600" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                    </svg>
                                    Asset #1
                                </h4>
                                <button type="button" class="text-red-500 hover:text-red-700 hidden remove-asset-btn flex items-center">
                                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                                    </svg>
                                    Remove
                                </button>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div class="group">
                                    <label class="form-label">
                                        Asset Type <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <!-- Hidden input to store selected asset type -->
                                        <input type="hidden" name="assets[0][type]" value="" required>

                                        <!-- Display field showing selected asset type -->
                                        <div class="form-input w-full border-2 border-gray-200 rounded-xl bg-gray-100 text-gray-700 font-medium"
                                             style="padding-left: 1.25rem; padding-right: 1.25rem; min-height: 52px; display: flex; align-items: center;">
                                            Asset type will be selected from database
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="group">
                                    <label class="form-label">
                                        Ownership Type <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <select name="assets[0][ownership_type]" required 
                                                class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900"
                                                style="padding-left: 1.25rem; padding-right: 2.5rem;">
                                            <option value="single">👤 Single Ownership</option>
                                            <option value="joint">👥 Joint Ownership</option>
                                        </select>
                                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="md:col-span-2 group">
                                    <label class="form-label">
                                        Description <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="assets[0][description]" required 
                                           class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                           placeholder="e.g., Terrace house at Taman Desa, KL"
                                           style="padding-left: 1.25rem; padding-right: 1.25rem;">
                                </div>
                                
                                <div class="group">
                                    <label class="form-label">
                                        Approximate Value (RM)
                                    </label>
                                    <div class="relative">
                                        <input type="number" name="assets[0][value]" step="0.01" min="0"
                                               class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                               placeholder="0.00"
                                               style="padding-left: 1.25rem; padding-right: 1.25rem;">
                                    </div>
                                </div>
                                
                                <div class="group">
                                    <label class="form-label">
                                        Supporting Document
                                    </label>
                                    <div class="relative">
                                        <input type="file" name="assets[0][document]" accept=".pdf,.jpg,.jpeg,.png"
                                               class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900"
                                               style="padding: 8px 1.25rem; height: 52px; display: flex; align-items: center; justify-content: flex-start;">
                                    </div>
                                </div>
                                
                                <div class="md:col-span-2 group">
                                    <label class="form-label">
                                        Additional Notes
                                    </label>
                                    <textarea name="assets[0][notes]" rows="2" 
                                              class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white resize-none text-gray-900 placeholder-gray-500"
                                              placeholder="Any additional details about this asset..."
                                              style="padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem; padding-bottom: 1rem;"></textarea>
                                </div>
                                
                                <!-- Conditional Fields Based on Asset Type -->
                                <div class="md:col-span-2 conditional-fields" data-asset-type="">
                                    <!-- Property Specific Fields -->
                                    <div class="property-fields grid grid-cols-1 md:grid-cols-2 gap-8" style="display: none;">
                                        <div class="group">
                                            <label class="form-label">Property Address</label>
                                            <input type="text" name="assets[0][address]" 
                                                   class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                   placeholder="Full property address">
                                        </div>
                                        <div class="group">
                                            <label class="form-label">Title Number</label>
                                            <input type="text" name="assets[0][title_number]" 
                                                   class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                   placeholder="Title/Deed number">
                                        </div>
                                    </div>
                                    
                                    <!-- Bank Account Specific Fields -->
                                    <div class="bank-fields grid grid-cols-1 md:grid-cols-2 gap-8" style="display: none;">
                                        <div class="group">
                                            <label class="form-label">Bank Name</label>
                                            <input type="text" name="assets[0][bank_name]" 
                                                   class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                   placeholder="Bank name">
                                        </div>
                                        <div class="group">
                                            <label class="form-label">Account Number</label>
                                            <input type="text" name="assets[0][account_number]" 
                                                   class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                   placeholder="Bank account number">
                                        </div>
                                    </div>
                                    
                                    <!-- Investment Specific Fields -->
                                    <div class="investment-fields grid grid-cols-1 md:grid-cols-2 gap-8" style="display: none;">
                                        <div class="group">
                                            <label class="form-label">Investment Type</label>
                                            <select name="assets[0][investment_type]" 
                                                        class="form-select w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white appearance-none text-gray-900"
                                                        style="padding-left: 1.25rem; padding-right: 2.5rem;">
                                                <option value="">Select investment type</option>
                                                <option value="shares">Shares</option>
                                                <option value="unit_trust">Unit Trust</option>
                                                <option value="mutual_fund">Mutual Fund</option>
                                                <option value="bonds">Bonds</option>
                                            </select>
                                        </div>
                                        <div class="group">
                                            <label class="form-label">Stock/Broker Name</label>
                                            <input type="text" name="assets[0][broker_name]" 
                                                   class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                   placeholder="Stock broker or investment company">
                                        </div>
                                    </div>
                                    
                                    <!-- Insurance Specific Fields -->
                                    <div class="insurance-fields grid grid-cols-1 md:grid-cols-2 gap-8" style="display: none;">
                                        <div class="group">
                                            <label class="form-label">Policy Number</label>
                                            <input type="text" name="assets[0][policy_number]" 
                                                   class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                   placeholder="Insurance policy number">
                                        </div>
                                        <div class="group">
                                            <label class="form-label">Insurance Company</label>
                                            <input type="text" name="assets[0][insurance_company]" 
                                                   class="form-input w-full border-2 border-gray-200 rounded-xl focus:border-red-500 focus:ring-4 focus:ring-red-100 outline-none bg-gray-50 hover:bg-white text-gray-900 placeholder-gray-500"
                                                   placeholder="Insurance company name">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                
                <!-- Add More Button -->
                <button type="button" id="addAsset" class="add-asset-btn">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 5v14M5 12h14"/>
                    </svg>
                    Add Another Asset
                </button>
                
                <!-- Modern Action Buttons -->
                <div class="mt-8 pt-6 border-t border-gray-200">
                    <div class="flex justify-between items-center">
                        <div class="flex gap-3">
                            <a href="{{ route('client.kyc.create') }}" class="btn-secondary flex items-center">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M15 18l-6-6 6-6"/>
                                </svg>
                                Back
                            </a>
                        </div>
                        <div class="flex gap-3">
                            <button type="submit" class="btn-primary flex items-center">
                                Continue to Liabilities
                                <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M9 18l6-6-6-6"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
    <script>
        let assetCount = 1;

        // Function to show/hide fields based on asset type
        function updateConditionalFields(assetType, assetEntry) {
            const conditionalFields = assetEntry.querySelector('.conditional-fields');

            // Hide all conditional fields first
            conditionalFields.querySelectorAll('.property-fields, .bank-fields, .investment-fields, .insurance-fields').forEach(field => {
                field.style.display = 'none';
            });

            // Show relevant fields based on asset type
            switch(assetType) {
                case 'property':
                    conditionalFields.querySelector('.property-fields').style.display = 'grid';
                    break;
                case 'bank_account':
                    conditionalFields.querySelector('.bank-fields').style.display = 'grid';
                    break;
                case 'investment':
                    conditionalFields.querySelector('.investment-fields').style.display = 'grid';
                    break;
                case 'insurance':
                    conditionalFields.querySelector('.insurance-fields').style.display = 'grid';
                    break;
                default:
                    // Hide all for 'other' and 'retirement_fund', 'business'
                    break;
            }
        }

        // Initialize conditional fields for existing assets
        document.querySelectorAll('.asset-entry').forEach((assetEntry, index) => {
            assetEntry.dataset.assetIndex = index;

            // Initialize conditional fields for existing assets
            const hiddenInput = assetEntry.querySelector(`input[name*="[type]"]`);
            if (hiddenInput && hiddenInput.value) {
                updateConditionalFields(hiddenInput.value, assetEntry);
            }
        });

        document.getElementById('addAsset').addEventListener('click', function() {
            const container = document.getElementById('assetsContainer');
            const template = container.querySelector('.asset-entry').cloneNode(true);

            // Update asset number
            template.querySelector('h4').textContent = `Asset #${assetCount + 1}`;

            // Update input names
            const inputs = template.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                const name = input.getAttribute('name');
                if (name) {
                    input.setAttribute('name', name.replace('[0]', `[${assetCount}]`));
                    // Reset value for all input types
                    if (input.tagName === 'SELECT') {
                        input.selectedIndex = 0; // Reset to first option
                        // Hide all conditional fields in new template
                        const conditionalFields = template.querySelector('.conditional-fields');
                        conditionalFields.querySelectorAll('.property-fields, .bank-fields, .investment-fields, .insurance-fields').forEach(field => {
                            field.style.display = 'none';
                        });
                    } else if (input.type !== 'hidden') {
                        input.value = '';
                    }
                }
            });

            // Show remove button
            template.querySelector('.remove-asset-btn').classList.remove('hidden');
            template.querySelector('.remove-asset-btn').addEventListener('click', function() {
                template.remove();
            });

            container.appendChild(template);
            assetCount++;
        });

        // Add form submission listener for debugging
        document.querySelector('form').addEventListener('submit', function(e) {
            console.log('Form submitting...');
            console.log('Form action:', e.target.action);
        });
    </script>
    @endpush
@endsection