@extends('layouts.portal')

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

@section('sidebar')
    @include('client.partials.onboarding-sidebar', ['step' => 6, 'client' => $client])
@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="bg-white rounded-xl shadow-sm p-8">
        @if(isset($willData['will_type']))
        <div class="mb-4 p-4 bg-yellow-100 border border-yellow-400 rounded">
            <strong>Debug:</strong> Will Type: {{ $willData['will_type'] }}
        </div>
        @endif
        
        <form action="{{ route('client.will.assets.store') }}" method="POST" class="bg-white rounded-xl shadow-sm p-8">
        @csrf
        
        <!-- Asset Categories Reference -->
        <div class="mb-8 bg-gray-50 p-4 rounded-lg">
            <h4 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                <i class="fas fa-list text-purple-500 mr-2"></i>Reference Index
            </h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <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>
                    <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">
                </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-4 bg-blue-50 rounded-lg">
                <h6 class="font-medium text-gray-800 mb-3">Beneficiary Allocation (for Asset no. 1)</h6>
                <div class="overflow-x-auto">
                    <table class="w-full border-collapse border border-gray-300">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="border border-gray-300 px-4 py-2 text-left">Beneficiary Name</th>
                                <th class="border border-gray-300 px-4 py-2 text-left">Percentage</th>
                            </tr>
                        </thead>
                        <tbody>
                            @for($i = 1; $i <= 6; $i++)
                            <tr>
                                <td class="border border-gray-300 px-4 py-2">
                                    <input type="text" name="assets[0][beneficiaries][{{ $i-1 }}][name]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="{{ $i }}.">
                                </td>
                                <td class="border border-gray-300 px-4 py-2">
                                    <input type="text" name="assets[0][beneficiaries][{{ $i-1 }}][percentage]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="">
                                </td>
                            </tr>
                            @endfor
                            <tr>
                                <td class="border border-gray-300 px-4 py-2">
                                    <input type="text" name="assets[0][transfer_to_trust]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="Transfer to my Trust">
                                </td>
                                <td class="border border-gray-300 px-4 py-2">
                                    <input type="text" name="assets[0][trust_percentage]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </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.will.beneficiaries') }}" 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)

        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>
                        <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">
                    </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-4 bg-blue-50 rounded-lg">
                    <h6 class="font-medium text-gray-800 mb-3">Beneficiary Allocation (for Asset no. ${assetCount + 1})</h6>
                    <div class="overflow-x-auto">
                        <table class="w-full border-collapse border border-gray-300">
                            <thead>
                                <tr class="bg-gray-100">
                                    <th class="border border-gray-300 px-4 py-2 text-left">Beneficiary Name</th>
                                    <th class="border border-gray-300 px-4 py-2 text-left">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][0][name]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="1.">
                                    </td>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][0][percentage]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][1][name]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="2.">
                                    </td>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][1][percentage]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][2][name]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="3.">
                                    </td>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][2][percentage]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][3][name]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="4.">
                                    </td>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][3][percentage]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][4][name]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="5.">
                                    </td>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][4][percentage]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][5][name]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="6.">
                                    </td>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][beneficiaries][5][percentage]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][transfer_to_trust]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="Transfer to my Trust">
                                    </td>
                                    <td class="border border-gray-300 px-4 py-2">
                                        <input type="text" name="assets[${assetCount}][trust_percentage]" class="w-full px-2 py-1 border border-gray-300 rounded" placeholder="">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            `;
            
            container.parentNode.insertBefore(newAsset, container);
            assetCount++;
        }
    </script>
@endsection