@extends('layouts.portal')
@section('title', 'Liabilities - Will')
@section('page_title', 'Liabilities')
@section('page_subtitle', 'for ' . $client->full_name)
@section('sidebar')
    @if(isset($isClientEdit) && $isClientEdit)
        @include('client.partials.sidebar', ['active' => 'profile'])
    @else
        @include('agent.partials.sidebar', ['active' => 'wills'])
    @endif
@endsection
@section('content')
    <style>
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
            display: none;
        }
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>

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

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

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

    <!-- Form -->
    <form action="@if(isset($isClientEdit) && $isClientEdit){{ route('client.will.edit.liabilities.store', $will->id) }}@else{{ route('agent.wills.liabilities.store', $will->id) }}@endif" method="POST" class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 mx-8 mb-8">
        @csrf

        <div class="mb-8"></div>

        <!-- Add Will Liabilities -->
        <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-orange-200 rounded-xl flex items-center justify-center">
                        <i class="fas fa-plus text-white text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-gray-700" style="font-family: 'Inter', sans-serif;">Add Will Liabilities</h3>
                        <p class="text-gray-600 text-lg" style="font-family: 'Inter', sans-serif;">Add liabilities with responsible family members</p>
                    </div>
                </div>
                <div class="flex gap-3">
                    <button type="button" onclick="addNewLiability()" 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 New
                    </button>
                </div>
                <input type="hidden" name="will_id" value="{{ $will->id }}">
            </div>

            <!-- Liabilities Container -->
            <div class="space-y-6" id="liabilitiesContainer">
                <!-- Liabilities will be dynamically loaded here -->
            </div>
        </div>

        <!-- Modal for Selecting Existing Liabilities -->
        <div id="selectExistingModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50 p-4">
            <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-96 overflow-y-auto">
                <div class="sticky top-0 bg-gradient-to-r from-[#772B10] to-[#8B3D15] p-6 text-white">
                    <h2 class="text-2xl font-bold">Select Existing Liabilities</h2>
                    <p class="text-white/80 mt-1">Choose liabilities from your profile to add to this will</p>
                </div>
                <div class="p-6">
                    <div id="existingLiabilitiesList" class="space-y-3">
                        <!-- Will be populated by JavaScript -->
                    </div>
                </div>
                <div class="bg-gray-100 px-6 py-4 flex justify-end gap-3 border-t">
                    <button type="button" onclick="closeSelectExistingModal()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 font-medium">
                        Cancel
                    </button>
                    <button type="button" onclick="addSelectedLiabilities()" class="px-4 py-2 bg-gradient-to-r from-[#772B10] to-[#8B3D15] text-white rounded-xl font-medium">
                        Add Selected
                    </button>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex flex-col md:flex-row gap-4 justify-between items-center">
            <a href="@if(isset($isClientEdit) && $isClientEdit){{ route('client.will.edit.assets', $will) }}@else{{ route('agent.wills.assets', $will) }}@endif" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 font-medium">
                <i class="fas fa-arrow-left mr-2"></i>Back to Assets
            </a>
            <div class="flex gap-3">
                <button type="submit" class="px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-xl font-medium shadow-lg">
                    <i class="fas fa-save mr-2"></i>Save Liabilities
                </button>
                <button type="submit" formaction="@if(isset($isClientEdit) && $isClientEdit){{ route('client.will.edit.liabilities.store', $will->id) }}@else{{ route('agent.wills.liabilities.store', $will->id) }}@endif?next=existing-will" class="px-6 py-3 bg-gradient-to-r from-[#772B10] to-[#8B3D15] text-white rounded-xl font-medium shadow-lg hover:from-[#8B3D15] hover:to-[#9F4F1A]">
                    <i class="fas fa-arrow-right mr-2"></i>Next: Existing Will
                </button>
            </div>
        </div>
    </form>

    <script>
        let liabilityCounter = 1;
        let familyMembers = [];
        let savedLiabilities = [];

        // Initialize on document ready
        document.addEventListener('DOMContentLoaded', function() {
            try {
                familyMembers = @json($client->familyMembers ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                savedLiabilities = @json($savedLiabilities ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                clientLiabilities = @json($clientLiabilities ?? [], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT);
                console.log('DEBUG: familyMembers:', familyMembers);
                console.log('DEBUG: savedLiabilities:', savedLiabilities);
                console.log('DEBUG: clientLiabilities:', clientLiabilities);
            } catch (e) {
                console.error('Error parsing JSON data:', e);
            }

            // Ensure arrays exist
            if (!Array.isArray(familyMembers)) familyMembers = [];
            if (!Array.isArray(savedLiabilities)) savedLiabilities = [];
            if (!Array.isArray(clientLiabilities)) clientLiabilities = [];

            console.log('DEBUG: After normalization - familyMembers:', familyMembers);
            console.log('DEBUG: After normalization - savedLiabilities:', savedLiabilities);
            console.log('DEBUG: After normalization - clientLiabilities:', clientLiabilities);
            console.log('DEBUG: savedLiabilities.length:', savedLiabilities.length);

            // Load existing saved liabilities
            loadExistingLiabilities();
            
            // Auto-load client liabilities if no saved liabilities exist
            if ((!savedLiabilities || savedLiabilities.length === 0) && clientLiabilities && clientLiabilities.length > 0) {
                console.log('DEBUG: Auto-loading client liabilities');
                clientLiabilities.forEach((liability, index) => {
                    createLiabilityFromData(liability, index);
                });
            }
        });

        function loadExistingLiabilities() {
            const container = document.getElementById('liabilitiesContainer');
            container.innerHTML = '';

            console.log('=== loadExistingLiabilities CALLED ===');
            console.log('DEBUG: savedLiabilities.length:', savedLiabilities.length);

            if (savedLiabilities && savedLiabilities.length > 0) {
                // Load saved liabilities
                savedLiabilities.forEach((liability, index) => {
                    console.log('DEBUG: Creating liability', index, 'with data:', liability);
                    createLiabilityFromData(liability, index);
                    liabilityCounter = index + 1;
                });
            } else {
                console.log('DEBUG: No saved liabilities to load');
            }
        }

        function createLiabilityFromData(liability, index) {
            const container = document.getElementById('liabilitiesContainer');
            
            const liabilityDiv = document.createElement('div');
            liabilityDiv.className = 'bg-gradient-to-br from-white to-gray-50 border-2 border-gray-200 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 liability-card relative overflow-hidden';
            liabilityDiv.setAttribute('data-liability', index);

            console.log('DEBUG: Processing liability family_members:', liability.family_members);

            // Add decorative bubbles
            let html = `
                <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-orange-100 to-orange-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-orange-50 to-orange-100 rounded-full -ml-12 -mb-12 opacity-20"></div>
                <div class="relative z-10">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                ${index + 1}
                            </div>
                            <div>
                                <h4 class="text-xl font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">Liability ${index + 1}</h4>
                                <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Liability details</p>
                            </div>
                        </div>
                        <button type="button" onclick="removeLiability(this)" class="px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors font-medium text-sm shadow-lg">
                            <i class="fas fa-trash mr-1"></i>Remove
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Type</label>
                            <input type="text" name="liabilities[${index}][type]" value="${liability.type || ''}" placeholder="e.g., Housing Loan" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl bg-white text-black">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Creditor</label>
                            <input type="text" name="liabilities[${index}][creditor]" value="${liability.creditor || ''}" placeholder="e.g., Bank Name" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl bg-white text-black">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Amount (RM)</label>
                            <input type="number" name="liabilities[${index}][amount]" value="${liability.amount || '0.00'}" step="0.01" placeholder="0.00" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl bg-white text-black">
                        </div>
                    </div>

                    <div class="mt-6">
                        <label class="block text-sm font-semibold text-gray-700 mb-3"><i class="fas fa-users text-purple-600 mr-2"></i>Responsible Family Members</label>
                        <div class="space-y-3 border-2 border-gray-200 rounded-lg p-3 bg-gray-50">
            `;

            // Parse family_members from liability
            let liabilityFamilyMembers = [];
            if (liability.family_members) {
                // if (Array.isArray(liability.family_members)) {
                //     liabilityFamilyMembers = liability.family_members;
                // } else if (typeof liability.family_members === 'string') {
                //     try {
                //         liabilityFamilyMembers = JSON.parse(liability.family_members);
                //     } catch (e) {
                //         console.error('Error parsing family_members:', e);
                //     }
                // }
                if (Array.isArray(liability.family_members)) {
                    liabilityFamilyMembers = liability.family_members;
                    } else if (typeof liability.family_members === 'object' && liability.family_members !== null) {
                       liabilityFamilyMembers = Object.values(liability.family_members);
                    } else if (typeof liability.family_members === 'string') {
                    try {
                      const parsed = JSON.parse(liability.family_members);
                        liabilityFamilyMembers = Array.isArray(parsed)
                            ? parsed
                            : Object.values(parsed);
                            } catch (e) {
                                console.error('Error parsing family_members:', e);
                            }
                        }
 
            }

            console.log('DEBUG: Parsed liabilityFamilyMembers:', liabilityFamilyMembers);

            if (familyMembers && familyMembers.length > 0) {
                familyMembers.forEach(member => {
                    const memberName = member.full_name || (member.first_name + ' ' + member.last_name);
                    const isSelected = liabilityFamilyMembers.some(fm => fm.id === member.id || fm.id == member.id);
                    const savedPercentage = liabilityFamilyMembers.find(fm => fm.id === member.id || fm.id == member.id)?.percentage || '';

                    console.log(`DEBUG: Member ${memberName} - isSelected: ${isSelected}, percentage: ${savedPercentage}`);

                    html += `
                        <div class="flex items-center gap-3 p-2 bg-white rounded border border-gray-200">
                            <input type="checkbox" name="liabilities[${index}][family_members][]" value="${member.id}" id="family_member_${index}_${member.id}" onchange="togglePercentageInput(${index}, ${member.id})" ${isSelected ? 'checked' : ''} class="w-4 h-4 text-purple-600 border-gray-300 rounded">
                            <label for="family_member_${index}_${member.id}" class="text-sm text-gray-700 cursor-pointer flex-1">${memberName}</label>
                            <input type="number" name="liabilities[${index}][percentages][${member.id}]" id="percentage_${index}_${member.id}" placeholder="%" min="0" max="100" step="0.01" value="${savedPercentage}" ${isSelected ? '' : 'disabled'} class="w-16 px-2 py-1 text-sm border border-gray-300 rounded text-center disabled:bg-gray-200 disabled:text-gray-500 text-black">
                        </div>
                    `;
                });
            } else {
                html += `<p class="text-sm text-gray-500 italic">No family members available</p>`;
            }

            html += `
                        </div>
                    </div>
                </div>
            `;

            liabilityDiv.innerHTML = html;
            container.appendChild(liabilityDiv);
        }

        function addNewLiability() {
            const container = document.getElementById('liabilitiesContainer');
            const currentCount = container.children.length;
            const index = currentCount;

            const liabilityDiv = document.createElement('div');
            liabilityDiv.className = 'bg-gradient-to-br from-white to-gray-50 border-2 border-blue-200 rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 liability-card relative overflow-hidden';
            liabilityDiv.setAttribute('data-liability', index);

            // Add decorative bubbles
            let html = `
                <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-100 to-blue-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-blue-50 to-blue-100 rounded-full -ml-12 -mb-12 opacity-20"></div>
                <div class="relative z-10">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg">
                                ${index + 1}
                            </div>
                            <div>
                                <h4 class="text-xl font-bold text-gray-900" style="font-family: 'Inter', sans-serif;">New Liability ${index + 1}</h4>
                                <p class="text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">Add liability details</p>
                            </div>
                        </div>
                        <button type="button" onclick="removeLiability(this)" class="px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors font-medium text-sm shadow-lg">
                            <i class="fas fa-trash mr-1"></i>Remove
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Type</label>
                            <input type="text" name="liabilities[${index}][type]" placeholder="e.g., Car Loan" required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl bg-white text-black">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Creditor</label>
                            <input type="text" name="liabilities[${index}][creditor]" placeholder="e.g., Bank Name" required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl bg-white text-black">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Amount (RM)</label>
                            <input type="number" name="liabilities[${index}][amount]" placeholder="0.00" step="0.01" required class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl bg-white text-black">
                        </div>
                    </div>

                    <div class="mt-6">
                        <label class="block text-sm font-semibold text-gray-700 mb-3"><i class="fas fa-users text-purple-600 mr-2"></i>Responsible Family Members</label>
                        <div class="space-y-3 border-2 border-gray-200 rounded-lg p-3 bg-gray-50">
            `;

            if (familyMembers && familyMembers.length > 0) {
                familyMembers.forEach(member => {
                    const memberName = member.full_name || (member.first_name + ' ' + member.last_name);
                    html += `
                        <div class="flex items-center gap-3 p-2 bg-white rounded border border-gray-200">
                            <input type="checkbox" name="liabilities[${index}][family_members][]" value="${member.id}" id="family_member_${index}_${member.id}" onchange="togglePercentageInput(${index}, ${member.id})" class="w-4 h-4 text-purple-600 border-gray-300 rounded">
                            <label for="family_member_${index}_${member.id}" class="text-sm text-gray-700 cursor-pointer flex-1">${memberName}</label>
                            <input type="number" name="liabilities[${index}][percentages][${member.id}]" id="percentage_${index}_${member.id}" placeholder="%" min="0" max="100" step="0.01" disabled class="w-16 px-2 py-1 text-sm border border-gray-300 rounded text-center disabled:bg-gray-200 disabled:text-gray-500 text-black">
                        </div>
                    `;
                });
            } else {
                html += `<p class="text-sm text-gray-500 italic">No family members available</p>`;
            }

            html += `
                        </div>
                    </div>
                </div>
            `;

            liabilityDiv.innerHTML = html;
            container.appendChild(liabilityDiv);
            liabilityCounter++;
        }

        function removeLiability(button) {
            button.closest('.liability-card').remove();
        }

        function togglePercentageInput(idx, mid) {
            const cb = document.getElementById(`family_member_${idx}_${mid}`);
            const pi = document.getElementById(`percentage_${idx}_${mid}`);
            if (!cb || !pi) return;
            if (cb.checked) {
                pi.disabled = false;
                pi.focus();
            } else {
                pi.disabled = true;
                pi.value = '';
            }
        }

        function showSelectExistingModal() {
            const modal = document.getElementById('selectExistingModal');
            const list = document.getElementById('existingLiabilitiesList');
            
            // Clear previous list
            list.innerHTML = '';
            
            // Populate with client liabilities
            if (clientLiabilities && clientLiabilities.length > 0) {
                clientLiabilities.forEach((liability, index) => {
                    const liabilityType = liability.type || 'Unknown';
                    const creditor = liability.creditor || 'N/A';
                    const amount = liability.amount || '0.00';
                    
                    const div = document.createElement('div');
                    div.className = 'flex items-center gap-3 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer';
                    div.innerHTML = `
                        <input type="checkbox" class="liability-checkbox" value="${index}" id="liability_${index}" class="w-4 h-4">
                        <label for="liability_${index}" class="flex-1 cursor-pointer">
                            <p class="font-semibold text-gray-900">${liabilityType}</p>
                            <p class="text-sm text-gray-600">${creditor} - RM ${parseFloat(amount).toFixed(2)}</p>
                        </label>
                    `;
                    list.appendChild(div);
                });
            } else {
                list.innerHTML = '<p class="text-gray-500 italic">No existing liabilities available</p>';
            }
            
            modal.classList.remove('hidden');
        }

        function closeSelectExistingModal() {
            document.getElementById('selectExistingModal').classList.add('hidden');
        }

        function addSelectedLiabilities() {
            const checkboxes = document.querySelectorAll('#existingLiabilitiesList .liability-checkbox:checked');
            
            if (checkboxes.length === 0) {
                alert('Please select at least one liability');
                return;
            }
            
            const container = document.getElementById('liabilitiesContainer');
            const currentCount = container.children.length;
            
            checkboxes.forEach((checkbox, offset) => {
                const liabilityIndex = parseInt(checkbox.value);
                const liability = clientLiabilities[liabilityIndex];
                createLiabilityFromData(liability, currentCount + offset);
            });
            
            closeSelectExistingModal();
        }

    </script>
@endsection