@extends('layouts.portal')

@section('title', 'Assets - Dummy Will')
@section('page_title', 'Assets')
@section('page_subtitle', 'List all your assets and assign beneficiaries')

@section('sidebar')
    @include('client.partials.sidebar', ['active' => 'dummy-will'])
@endsection

@section('content')
    <!-- Progress Steps -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">
                    <i class="fas fa-check"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Testator Details</p>
                    <p class="text-xs text-green-600">Completed</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-green-500 mx-4"></div>
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">
                    <i class="fas fa-check"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Beneficiaries</p>
                    <p class="text-xs text-green-600">Completed</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-green-500 mx-4"></div>
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full octowill-bg flex items-center justify-center text-white font-bold">3</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Assets</p>
                    <p class="text-xs text-gray-500">Current step</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">4</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Appointment of Trustees</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">5</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Allowances</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">6</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Gifts</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">7</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Donations</p>
                </div>
            </div>
            <div class="flex-1 h-1 bg-gray-200 mx-4"></div>
            <div class="flex items-center opacity-50">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold">8</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Witnesses</p>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-6xl mx-auto">
    <div class="bg-white rounded-xl shadow-md p-4">
        <div class="mb-4">
            <div class="bg-gradient-to-r from-green-600 to-green-700 rounded-xl p-4 mb-4 shadow-md">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-coins text-white text-sm"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-white">🧾 Assets</h2>
                        <p class="text-green-100 text-xs">List all your assets and assign beneficiaries</p>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('client.dummy.will.assets.store', $will->id) }}" method="POST">
        @csrf
        
        <!-- Asset Categories Reference -->
        <div class="mb-4 p-3 bg-gradient-to-r from-green-50 to-green-100 rounded-xl border-2 border-gray-100 shadow-md">
            <h4 class="text-sm font-semibold text-red-700 mb-3 pb-2 border-b border-gray-200">
                <i class="fas fa-list text-red-700 mr-2"></i>Reference Index
            </h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
                <div>
                    <p class="font-medium">Asset main category (mc)</p>
                    <ul class="ml-4 text-gray-600">
                        <li>mc1 – Fixed Asset</li>
                        <li>mc2 – Moveable Asset</li>
                        <li>mc3 – Monies & Accounts</li>
                        <li>mc4 – Personal Assets</li>
                    </ul>
                </div>
                <div>
                    <ul class="ml-4 text-gray-600">
                        <li>mc5 – Cars & Automobile</li>
                        <li>mc6 – Other assets</li>
                        <li>mc7 – Digital Assets</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Asset 1 -->
        <div class="mb-6 p-4 border border-gray-200 rounded-lg">
            <h5 class="font-medium text-gray-800 mb-3">Asset no. 1</h5>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Tick one:</label>
                    <div class="flex space-x-4">
                        <label class="flex items-center">
                            <input type="radio" name="assets[0][main_category]" value="mc1" class="mr-2">
                            <span class="text-sm">mc1</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="assets[0][main_category]" value="mc2" class="mr-2">
                            <span class="text-sm">mc2</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="assets[0][main_category]" value="mc3" class="mr-2">
                            <span class="text-sm">mc3</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="assets[0][main_category]" value="mc4" class="mr-2">
                            <span class="text-sm">mc4</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="assets[0][main_category]" value="mc5" class="mr-2">
                            <span class="text-sm">mc5</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="assets[0][main_category]" value="mc6" class="mr-2">
                            <span class="text-sm">mc6</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="assets[0][main_category]" value="mc7" class="mr-2">
                            <span class="text-sm">mc7</span>
                        </label>
                    </div>
                </div>
                
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Asset Category (main)</label>
                    <input type="text" name="assets[0][category_main]" 
                           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="Enter main category (e.g., Real Estate, Bank Accounts)">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Asset (sub category)</label>
                    <input type="text" name="assets[0][category_sub]" 
                           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="Enter sub category">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Document / Title</label>
                    <input type="text" name="assets[0][document_title]" 
                           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="Enter document or title">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Address / Location</label>
                    <input type="text" name="assets[0][address]" 
                           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="Enter address or location">
                </div>
                
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Describe the asset</label>
                    <textarea name="assets[0][description]" rows="3" 
                              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="Describe the asset in detail"></textarea>
                </div>
            </div>
            
            <!-- Beneficiary Allocation for Asset 1 -->
            <div class="mt-6 p-6 bg-white border border-gray-200 rounded-xl shadow-sm">
                <div class="flex items-center mb-4">
                    <div class="w-8 h-8 bg-white border-2 border-blue-600 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-users text-blue-600 text-sm"></i>
                    </div>
                    <h6 class="text-lg font-semibold text-gray-800">Beneficiary Allocation (for Asset no. 1)</h6>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full border-collapse border border-gray-300 rounded-lg overflow-hidden">
                        <thead>
                            <tr class="bg-gray-50 border-b border-gray-300">
                                <th class="border-r border-gray-300 px-6 py-3 text-left font-semibold text-gray-700">Beneficiary Name</th>
                                <th class="px-6 py-3 text-left font-semibold text-gray-700">Percentage (%)</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white">
                            @for($i = 1; $i <= 6; $i++)
                            <tr class="border-b border-gray-200 hover:bg-gray-50">
                                <td class="border-r border-gray-300 px-6 py-4">
                                    <input type="text" name="assets[0][beneficiaries][{{ $i-1 }}][name]" 
                                           list="beneficiary-list-0-{{ $i-1 }}" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition-all"
                                           placeholder="Type or select Beneficiary {{ $i }}">
                                    <datalist id="beneficiary-list-0-{{ $i-1 }}">
                                        @if($beneficiaries && count($beneficiaries) > 0)
                                            @foreach($beneficiaries as $beneficiary)
                                            <option value="{{ $beneficiary['full_name'] }}">
                                                {{ $beneficiary['full_name'] }} 
                                                @if(!empty($beneficiary['relationship'])) - {{ $beneficiary['relationship'] }} @endif
                                                @if(!empty($beneficiary['ic'])) ({{ $beneficiary['ic'] }}) @endif
                                            </option>
                                            @endforeach
                                        @endif
                                    </datalist>
                                </td>
                                <td class="px-6 py-4">
                                    <input type="number" min="0" max="100" name="assets[0][beneficiaries][{{ $i-1 }}][percentage]" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition-all" placeholder="0">
                                </td>
                            </tr>
                            @endfor
                            <tr class="border-b border-gray-200 hover:bg-gray-50 bg-blue-50">
                                <td class="border-r border-gray-300 px-6 py-4">
                                    <input type="text" name="assets[0][transfer_to_trust]" class="w-full px-3 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition-all bg-white" placeholder="Transfer to my Trust">
                                </td>
                                <td class="px-6 py-4">
                                    <input type="number" min="0" max="100" name="assets[0][trust_percentage]" class="w-full px-3 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition-all bg-white" placeholder="0">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="mt-4 text-sm text-gray-600 flex items-center">
                    <i class="fas fa-info-circle mr-2 text-blue-500"></i>
                    <span>Assign beneficiaries and their percentage shares for this asset</span>
                </div>
            </div>
        </div>

        <!-- Add more assets button -->
        <div class="text-center mb-6">
            <button type="button" onclick="addAsset()" class="px-6 py-2 border border-cyan-500 text-cyan-600 rounded-lg hover:bg-cyan-50 font-medium">
                <i class="fas fa-plus mr-2"></i> Add More Assets
            </button>
        </div>
        
        <!-- Submit Button -->
        <div class="flex justify-between">
            <a href="{{ route('client.dummy.will.beneficiaries', $will->id) }}" class="px-8 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </a>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium inline-flex items-center">
                <i class="fas fa-save mr-2"></i> Save and Continue to Trustees
            </button>
        </div>
    </form>
    
    <script>
        let assetCount = 1; // Start with 1 asset (we already have asset 0)
        
        // Beneficiaries data from backend
        const beneficiaries = @json($beneficiaries ?? []);
        
        // Category mapping
        const categoryNames = {
            'mc1': 'Fixed Asset',
            'mc2': 'Moveable Asset', 
            'mc3': 'Monies & Accounts',
            'mc4': 'Personal Assets',
            'mc5': 'Cars & Automobile',
            'mc6': 'Other assets',
            'mc7': 'Digital Assets'
        };

        // Function to generate beneficiary input with datalist
        function generateBeneficiaryInput(assetIndex, beneficiaryIndex, placeholder) {
            let inputHTML = `
                <input type="text" name="assets[${assetIndex}][beneficiaries][${beneficiaryIndex}][name]" 
                       list="beneficiary-list-${assetIndex}-${beneficiaryIndex}" 
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition-all"
                       placeholder="${placeholder}">
                <datalist id="beneficiary-list-${assetIndex}-${beneficiaryIndex}">
            `;
            
            if (beneficiaries.length > 0) {
                beneficiaries.forEach(beneficiary => {
                    inputHTML += `
                        <option value="${beneficiary.full_name}">
                            ${beneficiary.full_name} 
                            ${beneficiary.relationship ? ' - ' + beneficiary.relationship : ''}
                            ${beneficiary.ic ? ' (' + beneficiary.ic + ')' : ''}
                        </option>
                    `;
                });
            }
            
            inputHTML += '</datalist>';
            return inputHTML;
        }

        // Function to update category name based on selection
        function updateCategoryName(assetIndex) {
            const selectedRadio = document.querySelector(`input[name="assets[${assetIndex}][main_category]"]:checked`);
            const categoryInput = document.querySelector(`input[name="assets[${assetIndex}][category_main]"]`);
            
            if (selectedRadio && categoryInput) {
                const selectedValue = selectedRadio.value;
                categoryInput.value = categoryNames[selectedValue] || '';
            }
        }

        // Add event listeners for existing asset
        document.addEventListener('DOMContentLoaded', function() {
            // Update category name for asset 0 when radio changes
            const radioButtons0 = document.querySelectorAll('input[name="assets[0][main_category]"]');
            radioButtons0.forEach(radio => {
                radio.addEventListener('change', () => updateCategoryName(0));
            });
            
            // Initial update for asset 0
            updateCategoryName(0);
        });

        function addAsset() {
            const container = document.querySelector('form > div.text-center');
            const newAsset = document.createElement('div');
            newAsset.className = 'mb-6 p-4 border border-gray-200 rounded-lg';
            newAsset.innerHTML = `
                <h5 class="font-medium text-gray-800 mb-3">Asset no. ${assetCount + 1}</h5>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tick one:</label>
                        <div class="flex space-x-4">
                            <label class="flex items-center">
                                <input type="radio" name="assets[${assetCount}][main_category]" value="mc1" class="mr-2">
                                <span class="text-sm">mc1</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="assets[${assetCount}][main_category]" value="mc2" class="mr-2">
                                <span class="text-sm">mc2</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="assets[${assetCount}][main_category]" value="mc3" class="mr-2">
                                <span class="text-sm">mc3</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="assets[${assetCount}][main_category]" value="mc4" class="mr-2">
                                <span class="text-sm">mc4</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="assets[${assetCount}][main_category]" value="mc5" class="mr-2">
                                <span class="text-sm">mc5</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="assets[${assetCount}][main_category]" value="mc6" class="mr-2">
                                <span class="text-sm">mc6</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="assets[${assetCount}][main_category]" value="mc7" class="mr-2">
                                <span class="text-sm">mc7</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Asset Category (main)</label>
                        <input type="text" name="assets[${assetCount}][category_main]" 
                               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="Enter main category (e.g., Real Estate, Bank Accounts)">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Asset (sub category)</label>
                        <input type="text" name="assets[${assetCount}][category_sub]" 
                               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="Enter sub category">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Document / Title</label>
                        <input type="text" name="assets[${assetCount}][document_title]" 
                               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="Enter document or title">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Address / Location</label>
                        <input type="text" name="assets[${assetCount}][address]" 
                               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="Enter address or location">
                    </div>
                    
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Describe the asset</label>
                        <textarea name="assets[${assetCount}][description]" rows="3" 
                                  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="Describe the asset in detail"></textarea>
                    </div>
                </div>
                
                <!-- Beneficiary Allocation for new Asset -->
                <div class="mt-6 p-6 bg-white border border-gray-200 rounded-xl shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 bg-white border-2 border-blue-600 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-users text-blue-600 text-sm"></i>
                        </div>
                        <h6 class="text-lg font-semibold text-gray-800">Beneficiary Allocation (for Asset no. ${assetCount + 1})</h6>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full border-collapse border border-gray-300 rounded-lg overflow-hidden">
                            <thead>
                                <tr class="bg-gray-50 border-b border-gray-300">
                                    <th class="border-r border-gray-300 px-6 py-3 text-left font-semibold text-gray-700">Beneficiary Name</th>
                                    <th class="px-6 py-3 text-left font-semibold text-gray-700">Percentage (%)</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white">
                                ${[0,1,2,3,4,5].map(i => `
                                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                                        <td class="border-r border-gray-300 px-6 py-4">
                                            ${generateBeneficiaryInput(assetCount, i, `Type or select Beneficiary ${i + 1}`)}
                                        </td>
                                        <td class="px-6 py-4">
                                            <input type="number" min="0" max="100" name="assets[${assetCount}][beneficiaries][${i}][percentage]" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition-all" placeholder="0">
                                        </td>
                                    </tr>
                                `).join('')}
                                <tr class="border-b border-gray-200 hover:bg-gray-50 bg-blue-50">
                                    <td class="border-r border-gray-300 px-6 py-4">
                                        <input type="text" name="assets[${assetCount}][transfer_to_trust]" class="w-full px-3 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition-all bg-white" placeholder="Transfer to my Trust">
                                    </td>
                                    <td class="px-6 py-4">
                                        <input type="number" min="0" max="100" name="assets[${assetCount}][trust_percentage]" class="w-full px-3 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition-all bg-white" placeholder="0">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 text-sm text-gray-600 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-blue-500"></i>
                        <span>Assign beneficiaries and their percentage shares for this asset</span>
                    </div>
                </div>
            `;
            
            container.parentNode.insertBefore(newAsset, container);
            assetCount++;
            
            // Add event listeners for new asset radio buttons
            const newRadioButtons = document.querySelectorAll(`input[name="assets[${assetCount-1}][main_category]"]`);
            newRadioButtons.forEach(radio => {
                radio.addEventListener('change', () => updateCategoryName(assetCount-1));
            });
            
            // Initial update for new asset
            updateCategoryName(assetCount-1);
        }
    </script>
@endsection