@extends('layouts.portal')

@section('title', 'Appointment of Trustees - Will')
@section('page_title', 'Appointment of Trustees')
@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')
    <!-- Progress Steps -->
    <div class="mb-8">
        <div class="flex items-center justify-between overflow-x-auto">
            <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">Will Type</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">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-gradient-to-r from-[#772B10] to-[#8B3D15] flex items-center justify-center text-white font-bold shadow-lg">7</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Trustees</p>
                    <p class="text-xs text-gray-500 font-semibold">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">8</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">9</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">10</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">11</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-[#772B10] to-[#8B3D15] 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-user-tie text-white text-sm"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-white">🧾 Appointment of Trustees</h2>
                        <p class="text-[#8B3D15]/100 text-xs">Add trustees for the will</p>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('agent.wills.trustees.store', $will->id) }}" method="POST">
        @csrf
        
        <!-- Notes Section -->
        <div class="p-3 bg-gradient-to-r from-[#772B10]/10 to-[#8B3D15]/10 rounded-xl mb-4 border-2 border-gray-100 shadow-md">
            <h3 class="text-sm font-semibold text-gray-800 mb-3">Appointment of Trustees (FOR TRUST PRODUCTS)</h3>
            <div class="bg-white p-3 rounded">
                <p class="text-xs text-gray-800"><strong>Notes:</strong></p>
                <ul class="text-xs text-gray-800 list-disc list-inside mt-2">
                    <li>Appointment of Trustee is required for setting up your Trust.</li>
                    <li>You can appoint your beneficiaries as trustees or appoint any other person you like to give power to manage your assets after your demise.</li>
                    <li>You can also appoint yourself as a Trustee (other than for testamentary trust) and give allowance to yourself as trustee. The remaining trustees will automatically resume responsibility after your demise.</li>
                </ul>
            </div>
        </div>

        <!-- Trustees Container -->
        <div id="trustees-container" class="space-y-4">
            @if(isset($savedTrustees) && count($savedTrustees) > 0)
                @foreach($savedTrustees as $index => $trustee)
                    <div class="mb-6 p-4 border border-gray-200 rounded-lg" id="trustee_{{ $index }}">
                        <h4 class="font-medium text-gray-800 mb-3">Trustee #{{ $index + 1 }}</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Full Name <span class="text-red-500">*</span></label>
                                <input type="text" name="trustees[{{ $index }}][full_name]" value="{{ $trustee['full_name'] ?? '' }}" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all" placeholder="Enter full name">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">NRIC / Passport <span class="text-red-500">*</span></label>
                                <input type="text" name="trustees[{{ $index }}][ic]" value="{{ $trustee['ic'] ?? '' }}" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all" placeholder="Enter NRIC or Passport">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                                <input type="tel" name="trustees[{{ $index }}][phone]" value="{{ $trustee['phone'] ?? '' }}" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all" placeholder="Enter phone number">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Address</label>
                                <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200 trustee-address-container" data-index="{{ $index }}">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        <div class="md:col-span-2">
                                            <input type="text" name="trustees[{{ $index }}][address_line_1]" value="{{ $trustee['address_line_1'] ?? '' }}" placeholder="Address Line 1 *"
                                                   class="trustee-addr-1 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                        </div>
                                        <div class="md:col-span-2">
                                            <input type="text" name="trustees[{{ $index }}][address_line_2]" value="{{ $trustee['address_line_2'] ?? '' }}" placeholder="Address Line 2 (Optional)"
                                                   class="trustee-addr-2 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                        </div>
                                        <div>
                                            <input type="text" name="trustees[{{ $index }}][city]" value="{{ $trustee['city'] ?? '' }}" placeholder="City *"
                                                   class="trustee-city w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                        </div>
                                        <div>
                                            <input type="text" name="trustees[{{ $index }}][state]" value="{{ $trustee['state'] ?? '' }}" placeholder="State *"
                                                   class="trustee-state w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                        </div>
                                        <div>
                                            <input type="text" name="trustees[{{ $index }}][postal_code]" value="{{ $trustee['postal_code'] ?? '' }}" placeholder="Postal/Pin Code *"
                                                   class="trustee-postal w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                        </div>
                                        <div>
                                            <select name="trustees[{{ $index }}][country]" class="trustee-country w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                                <option value="">Select Country *</option>
                                                <option value="Malaysia" {{ ($trustee['country'] ?? '') == 'Malaysia' ? 'selected' : '' }}>Malaysia</option>
                                                <option value="Singapore" {{ ($trustee['country'] ?? '') == 'Singapore' ? 'selected' : '' }}>Singapore</option>
                                                <option value="Indonesia" {{ ($trustee['country'] ?? '') == 'Indonesia' ? 'selected' : '' }}>Indonesia</option>
                                                <option value="Thailand" {{ ($trustee['country'] ?? '') == 'Thailand' ? 'selected' : '' }}>Thailand</option>
                                                <option value="Philippines" {{ ($trustee['country'] ?? '') == 'Philippines' ? 'selected' : '' }}>Philippines</option>
                                                <option value="Other" {{ ($trustee['country'] ?? '') == 'Other' ? 'selected' : '' }}>Other</option>
                                            </select>
                                        </div>
                                    </div>
                                    <textarea name="trustees[{{ $index }}][address]" rows="2" readonly
                                              class="trustee-merged w-full mt-3 px-3 py-2 border-2 border-gray-200 rounded-lg bg-gray-100 text-gray-600 text-sm resize-none"
                                              placeholder="Complete address will appear here...">{{ $trustee['address'] ?? '' }}</textarea>
                                </div>
                            </div>
                            @if($index > 0)
                                <div class="md:col-span-2">
                                    <button type="button" onclick="this.closest('.mb-6').remove()" class="text-red-500 hover:text-red-700 text-sm">
                                        <i class="fas fa-trash mr-1"></i>Remove Trustee
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            @else
                <!-- Primary Trustee (if no saved trustees) -->
                <div class="mb-6 p-4 border border-gray-200 rounded-lg">
                    <h4 class="font-medium text-gray-800 mb-3">Primary Trustee</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Full Name <span class="text-red-500">*</span></label>
                            <input type="text" name="trustees[0][full_name]" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all" placeholder="Enter full name">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">NRIC / Passport <span class="text-red-500">*</span></label>
                            <input type="text" name="trustees[0][ic]" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all" placeholder="Enter NRIC or Passport">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                            <input type="tel" name="trustees[0][phone]" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all" placeholder="Enter phone number">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Address</label>
                            <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200 trustee-address-container" data-index="0">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <div class="md:col-span-2">
                                        <input type="text" name="trustees[0][address_line_1]" placeholder="Address Line 1 *"
                                               class="trustee-addr-1 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                    </div>
                                    <div class="md:col-span-2">
                                        <input type="text" name="trustees[0][address_line_2]" placeholder="Address Line 2 (Optional)"
                                               class="trustee-addr-2 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                    </div>
                                    <div>
                                        <input type="text" name="trustees[0][city]" placeholder="City *"
                                               class="trustee-city w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                    </div>
                                    <div>
                                        <input type="text" name="trustees[0][state]" placeholder="State *"
                                               class="trustee-state w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                    </div>
                                    <div>
                                        <input type="text" name="trustees[0][postal_code]" placeholder="Postal/Pin Code *"
                                               class="trustee-postal w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                    </div>
                                    <div>
                                        <select name="trustees[0][country]" class="trustee-country w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                            <option value="">Select Country *</option>
                                            <option value="Malaysia" selected>Malaysia</option>
                                            <option value="Singapore">Singapore</option>
                                            <option value="Indonesia">Indonesia</option>
                                            <option value="Thailand">Thailand</option>
                                            <option value="Philippines">Philippines</option>
                                            <option value="Other">Other</option>
                                        </select>
                                    </div>
                                </div>
                                <textarea name="trustees[0][address]" rows="2" readonly
                                          class="trustee-merged w-full mt-3 px-3 py-2 border-2 border-gray-200 rounded-lg bg-gray-100 text-gray-600 text-sm resize-none"
                                          placeholder="Complete address will appear here..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Add More Trustees Button -->
            <div class="text-center">
                <button type="button" onclick="addTrustee()" class="px-6 py-2 border border-[#772B10] text-[#772B10] rounded-lg hover:bg-[#772B10]/10 font-medium">
                    <i class="fas fa-plus mr-2"></i> Add More Trustees
                </button>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="flex justify-between mt-6">
            <a href="{{ route('agent.wills.existing-will', $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-gradient-to-r from-[#772B10] to-[#8B3D15] hover:from-[#8B3D15] hover:to-[#9F4F1A] text-white px-8 py-3 rounded-lg font-medium inline-flex items-center">
                <i class="fas fa-save mr-2"></i> Continue to Allowances
            </button>
        </div>
    </form>

    <script>
        let trusteeCount = {{ isset($savedTrustees) ? count($savedTrustees) : 1 }};

        function addTrustee() {
            const container = document.getElementById('trustees-container');
            const newTrustee = document.createElement('div');
            newTrustee.className = 'mb-6 p-4 border border-gray-200 rounded-lg';
            newTrustee.innerHTML = `
                <h4 class="font-medium text-gray-800 mb-3">Trustee No. ${trusteeCount + 1}</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Full Name <span class="text-red-500">*</span></label>
                        <input type="text" name="trustees[${trusteeCount}][full_name]" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all" placeholder="Enter full name">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">NRIC / Passport <span class="text-red-500">*</span></label>
                        <input type="text" name="trustees[${trusteeCount}][ic]" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all" placeholder="Enter NRIC or Passport">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                        <input type="tel" name="trustees[${trusteeCount}][phone]" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all" placeholder="Enter phone number">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Address</label>
                        <div class="bg-gray-50 p-4 rounded-xl border-2 border-gray-200 trustee-address-container" data-index="${trusteeCount}">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                <div class="md:col-span-2">
                                    <input type="text" name="trustees[${trusteeCount}][address_line_1]" placeholder="Address Line 1 *"
                                           class="trustee-addr-1 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                </div>
                                <div class="md:col-span-2">
                                    <input type="text" name="trustees[${trusteeCount}][address_line_2]" placeholder="Address Line 2 (Optional)"
                                           class="trustee-addr-2 w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                </div>
                                <div>
                                    <input type="text" name="trustees[${trusteeCount}][city]" placeholder="City *"
                                           class="trustee-city w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                </div>
                                <div>
                                    <input type="text" name="trustees[${trusteeCount}][state]" placeholder="State *"
                                           class="trustee-state w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                </div>
                                <div>
                                    <input type="text" name="trustees[${trusteeCount}][postal_code]" placeholder="Postal/Pin Code *"
                                           class="trustee-postal w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                </div>
                                <div>
                                    <select name="trustees[${trusteeCount}][country]" class="trustee-country w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-[#772B10] focus:border-[#772B10] outline-none transition-all bg-white">
                                        <option value="">Select Country *</option>
                                        <option value="Malaysia" selected>Malaysia</option>
                                        <option value="Singapore">Singapore</option>
                                        <option value="Indonesia">Indonesia</option>
                                        <option value="Thailand">Thailand</option>
                                        <option value="Philippines">Philippines</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                            </div>
                            <textarea name="trustees[${trusteeCount}][address]" rows="2" readonly
                                      class="trustee-merged w-full mt-3 px-3 py-2 border-2 border-gray-200 rounded-lg bg-gray-100 text-gray-600 text-sm resize-none"
                                      placeholder="Complete address will appear here..."></textarea>
                        </div>
                    </div>
                    <div class="md:col-span-2">
                        <button type="button" onclick="this.closest('.mb-6').remove()" class="text-red-500 hover:text-red-700 text-sm">
                            <i class="fas fa-trash mr-1"></i>Remove Trustee
                        </button>
                    </div>
                </div>
            `;
            
            container.appendChild(newTrustee);
            trusteeCount++;
            
            // Setup address merging for new trustee
            setTimeout(() => {
                setupTrusteeAddressMerging(trusteeCount - 1);
            }, 100);
        }
        
        // Setup address merging for trustee
        function setupTrusteeAddressMerging(index) {
            const container = document.querySelector(`.trustee-address-container[data-index="${index}"]`);
            if (!container) return;
            
            const fields = container.querySelectorAll('input, select');
            const mergedField = container.querySelector('.trustee-merged');
            
            fields.forEach(field => {
                field.addEventListener('input', () => mergeTrusteeAddress(container));
                field.addEventListener('change', () => mergeTrusteeAddress(container));
                field.addEventListener('blur', () => mergeTrusteeAddress(container));
            });
            
            mergeTrusteeAddress(container);
        }
        
        function mergeTrusteeAddress(container) {
            const line1 = container.querySelector('.trustee-addr-1')?.value || '';
            const line2 = container.querySelector('.trustee-addr-2')?.value || '';
            const city = container.querySelector('.trustee-city')?.value || '';
            const state = container.querySelector('.trustee-state')?.value || '';
            const postal = container.querySelector('.trustee-postal')?.value || '';
            const country = container.querySelector('.trustee-country')?.value || '';
            
            const parts = [];
            if (line1) parts.push(line1);
            if (line2) parts.push(line2);
            if (city) parts.push(city);
            if (state) parts.push(state);
            if (postal) parts.push(postal);
            if (country) parts.push(country);
            
            const mergedAddress = parts.join(', ');
            const mergedField = container.querySelector('.trustee-merged');
            if (mergedField) {
                mergedField.value = mergedAddress;
            }
        }
        
        // Initialize trustee address merging on page load
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.trustee-address-container').forEach(container => {
                const index = container.dataset.index;
                if (index !== undefined) {
                    setupTrusteeAddressMerging(index);
                }
            });
        });
    </script>
    </div>
@endsection