@extends('layouts.portal')

@section('title', 'My Liabilities')
@section('page_title', 'Step 5: Liabilities')
@section('page_subtitle', 'Record your loans, mortgages, and other debts')

@section('sidebar')
    @include('client.partials.onboarding-sidebar', ['step' => 5, 'onboardingStep' => $onboardingStep])
@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 liabilities are in read-only mode. To edit, you need to request edit access.</p>
                </div>
            </div>
            <a href="{{ route('client.edit.section') }}" 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 liabilities 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;
        }
        
        .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-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;
        }
        
        .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-secondary:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 12px rgba(153, 27, 27, 0.15) !important;
            background: #f8fafc !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;
        }
        
        .liability-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;
        }
        
        .liability-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;
        }
        
        .remove-liability-btn {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
            color: #dc2626 !important;
            border: 2px solid #dc2626 !important;
            border-radius: 12px !important;
            padding: 10px 20px !important;
            font-weight: 600 !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 14px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            position: relative !important;
        }
        
        .remove-liability-btn::before {
            content: '🗑' !important;
            font-size: 16px !important;
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
        }
        
        .add-liability-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;
            font-size: 14px !important;
            box-shadow: 0 4px 15px rgba(153, 27, 27, 0.15) !important;
            position: relative !important;
            overflow: hidden !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .add-liability-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-liability-btn:hover::before {
            left: 100% !important;
        }
        
        .add-liability-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">
        <!-- 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.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </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-green-500 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.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </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-green-500 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.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </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-green-500 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.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900 form-label">Assets</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-red-600 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">5</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900 form-label">Liabilities</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">6</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-700">Will</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">7</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-700">Review</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>
                        Liabilities Information
                    </h3>
                    <p class="text-red-100 text-sm mt-1" style="font-family: 'Inter', sans-serif;">Record your loans, mortgages, and other debts. This information will be used for will preparation.</p>
                </div>
            </div>
            
            <form action="{{ route('client.liabilities.store') }}" method="POST" class="p-8" id="liabilitiesForm">
                @csrf
        
                <div class="mb-6">
                    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
                        <div class="flex items-start">
                            <svg class="w-6 h-6 text-amber-500 mt-1 mr-3" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                            </svg>
                            <div>
                                <h4 class="font-medium text-amber-800 mb-1" style="font-family: 'Inter', sans-serif;">Liability Information</h4>
                                <p class="text-sm text-amber-700" style="font-family: 'Inter', sans-serif;">Please provide details of all your outstanding debts including housing loans, personal loans, credit cards, and business loans. This helps us understand your full financial picture for will preparation. This step is optional if you have no liabilities.</p>
                            </div>
                        </div>
                    </div>
                </div>
        
        <div id="liabilitiesContainer">
            @if($onboardingStep && $onboardingStep->liabilities && count($onboardingStep->liabilities) > 0)
                @foreach($onboardingStep->liabilities as $index => $liability)
                <!-- Existing Liability Entry -->
                <div class="liability-entry border border-gray-200 rounded-lg p-6 mb-4">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="font-semibold text-gray-800">
                            @if($liability['type'] == 'housing_loan')
                                Housing Loan
                            @elseif($liability['type'] == 'personal_loan')
                                Personal Loan
                            @elseif($liability['type'] == 'credit_card')
                                Credit Card
                            @elseif($liability['type'] == 'business_loan')
                                Business Loan
                            @else
                                Liability
                            @endif
                        </h4>
                        <button type="button" class="text-red-500 hover:text-red-700 {{ count($onboardingStep->liabilities) > 1 ? '' : 'hidden' }} remove-liability-btn">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Description / Lender</label>
                            <input type="text" name="liabilities[{{ $index }}][description]" 
                                   value="{{ $liability['description'] ?? '' }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                                   placeholder="e.g., Maybank Housing Loan - Property in KL">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Amount (RM)</label>
                            <input type="number" name="liabilities[{{ $index }}][amount]" 
                                   value="{{ $liability['amount'] ?? '' }}"
                                   step="0.01" min="0"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                                   placeholder="0.00">
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Liability Type</label>
                        <select name="liabilities[{{ $index }}][type]" 
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                            <option value="">Select type</option>
                            <option value="housing_loan" {{ $liability['type'] == 'housing_loan' ? 'selected' : '' }}>🏠 Housing Loan</option>
                            <option value="personal_loan" {{ $liability['type'] == 'personal_loan' ? 'selected' : '' }}>💰 Personal Loan</option>
                            <option value="credit_card" {{ $liability['type'] == 'credit_card' ? 'selected' : '' }}>💳 Credit Card</option>
                            <option value="business_loan" {{ $liability['type'] == 'business_loan' ? 'selected' : '' }}>🏢 Business Loan</option>
                        </select>
                    </div>
                </div>
                @endforeach
            @else
                <!-- Empty Liability Entry Template -->
                <div class="liability-entry border border-gray-200 rounded-lg p-6 mb-4">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="font-semibold text-gray-800">Liability #1</h4>
                        <button type="button" class="text-red-500 hover:text-red-700 hidden remove-liability-btn">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Description / Lender</label>
                            <input type="text" name="liabilities[0][description]" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                                   placeholder="e.g., Maybank Housing Loan - Property in KL">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Amount (RM)</label>
                            <input type="number" name="liabilities[0][amount]" 
                                   step="0.01" min="0"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                                   placeholder="0.00">
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Liability Type</label>
                        <select name="liabilities[0][type]" 
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                            <option value="">Select type</option>
                            <option value="housing_loan">🏠 Housing Loan</option>
                            <option value="personal_loan">💰 Personal Loan</option>
                            <option value="credit_card">💳 Credit Card</option>
                            <option value="business_loan">🏢 Business Loan</option>
                        </select>
                    </div>
                </div>
            @endif
        </div>
        
        <!-- Modern Add More Button -->
        <button type="button" id="addLiability" class="w-full py-4 border-2 border-dashed border-red-300 rounded-xl text-red-600 hover:border-red-500 hover:bg-red-50 hover:text-red-700 transition-all duration-300 font-medium flex items-center justify-center group">
            <span class="mr-3 group-hover:scale-110 transition-transform">➕</span>  
            Add Another Liability
        </button>
        
        <!-- Skip Option -->
        <!-- <div class="text-center mb-6">
            <p class="text-sm text-gray-500 mb-3">Ready to proceed to will creation?</p>
            <div class="flex justify-center gap-3">
                <button type="button" onclick="proceedToWill()" class="px-6 py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 font-medium transition-colors inline-flex items-center">
                    <span class="mr-2">→</span>
                    Proceed to Will Creation
                </button>
            </div>
            <p class="text-xs text-gray-400 mt-2">This will save any liabilities and take you to will creation</p>
        </div> -->
        
        <!-- 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.assets.create') }}" class="btn-secondary flex items-center">
                        <span class="mr-2">←</span>
                        Back
                    </a>
                </div>
                <div class="flex gap-3">
                    <button type="submit" name="save_liabilities" value="true" class="btn-primary flex items-center">
                        <span class="mr-2">💾</span>
                        Save Liabilities
                    </button>
                </div>
            </div>
            <p class="text-xs text-gray-500 text-center mt-3">
                <span class="mr-1">ℹ</span>
                Save your liabilities or proceed directly to will creation
            </p>
        </div>
            </form>
        </div>
    </div>

    @push('scripts')
    <script>
        // Save form data to localStorage
        function saveFormData() {
            const formData = new FormData(document.querySelector('form'));
            const data = {};
            formData.forEach((value, key) => {
                data[key] = value;
            });
            localStorage.setItem('liabilitiesFormData', JSON.stringify(data));
        }

        // Restore form data from localStorage
        function restoreFormData() {
            const savedData = localStorage.getItem('liabilitiesFormData');
            if (savedData) {
                const data = JSON.parse(savedData);
                Object.keys(data).forEach(key => {
                    const input = document.querySelector(`[name="${key}"]`);
                    if (input) {
                        if (input.type === 'checkbox') {
                            input.checked = data[key] === 'on';
                        } else if (input.type === 'radio') {
                            const radio = document.querySelector(`[name="${key}"][value="${data[key]}"]`);
                            if (radio) radio.checked = true;
                        } else {
                            input.value = data[key];
                        }
                    }
                });
            }
        }

        // Clear form data from localStorage
        function clearFormData() {
            localStorage.removeItem('liabilitiesFormData');
        }

        // Save as draft
        function saveAsDraft() {
            saveFormData();
            alert('Liabilities saved as draft!');
        }

        // Proceed to Will Creation
        function proceedToWill() {
            // Save any existing liabilities data
            saveFormData();
            
            // Create form data to indicate proceed
            const formData = new FormData();
            formData.append('proceed_to_will', 'true');
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
            
            // Submit to store route with proceed flag
            fetch('{{ route("client.liabilities.store") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => {
                if (response.ok) {
                    // Redirect to client dashboard since will creation is disabled for clients
                    window.location.href = '{{ route("client.dashboard") }}';
                } else {
                    throw new Error('Failed to proceed');
                }
            })
            .catch(error => {
                console.error('Proceed error:', error);
                // Fallback: direct redirect to client dashboard
                window.location.href = '{{ route("client.dashboard") }}';
            });
        }

        // Auto-save form data on input change
        document.addEventListener('DOMContentLoaded', function() {
            // Restore form data on page load
            restoreFormData();

            // Save form data on any input change
            const form = document.querySelector('form');
            const inputs = form.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.addEventListener('input', saveFormData);
                input.addEventListener('change', saveFormData);
            });

            // Clear form data on successful submission
            form.addEventListener('submit', function(e) {
                clearFormData();
            });
        });

        let liabilityCount = {{ $onboardingStep && $onboardingStep->liabilities ? count($onboardingStep->liabilities) + 1 : 1 }};
        
        document.getElementById('addLiability').addEventListener('click', function() {
            const container = document.getElementById('liabilitiesContainer');
            const template = container.querySelector('.liability-entry').cloneNode(true);
            
            // Update liability number
            template.querySelector('h4').textContent = `Liability #${liabilityCount + 1}`;
            
            // Update input names and clear values
            const inputs = template.querySelectorAll('input, select');
            inputs.forEach(input => {
                const name = input.getAttribute('name');
                if (name) {
                    input.setAttribute('name', name.replace(/\[\d+\]/, `[${liabilityCount}]`));
                    if (input.type === 'text' || input.type === 'number' || input.tagName === 'SELECT') {
                        input.value = '';
                    }
                }
            });
            
            // Show remove button
            template.querySelector('.remove-liability-btn').classList.remove('hidden');
            template.querySelector('.remove-liability-btn').addEventListener('click', function() {
                template.remove();
                saveFormData(); // Save when removing liability
            });
            
            container.appendChild(template);
            liabilityCount++;
            
            // Save form data after adding new liability
            setTimeout(() => {
                saveFormData();
            }, 100);
        });
    </script>
    @endpush
@endsection