@extends('layouts.portal')

@section('title', 'Appointment of Trustees')
@section('page_title', 'Appointment of Trustees')
@section('page_subtitle', 'Add trustees for your will')

@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 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">Assets</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">4</div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Appointment of Trustees</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">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>

    <form action="{{ route('client.will.trustees.store') }}" method="POST" class="bg-white rounded-xl shadow-sm p-8">
        @csrf
        
        <!-- Notes Section -->
        <div class="p-6 bg-blue-50 rounded-lg mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Appointment of Trustees (FOR TRUST PRODUCTS)</h3>
            <div class="bg-white p-4 rounded">
                <p class="text-sm text-blue-800"><strong>Notes:</strong></p>
                <ul class="text-sm text-blue-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-6">
            <!-- Primary Trustee -->
            <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-cyan-400 focus:border-cyan-400 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-cyan-400 focus:border-cyan-400 outline-none transition-all" placeholder="Enter NRIC or Passport">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Nationality</label>
                        <input type="text" name="trustees[0][nationality]" 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 nationality">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Relationship</label>
                        <input type="text" name="trustees[0][relationship]" 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 relationship">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Gender</label>
                        <div class="flex space-x-4">
                            <label class="flex items-center">
                                <input type="radio" name="trustees[0][gender]" value="M" class="mr-2">
                                <span class="text-sm">M</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="trustees[0][gender]" value="F" class="mr-2">
                                <span class="text-sm">F</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">e-Mail</label>
                        <input type="email" name="trustees[0][email]" 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 email">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tel No.</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-cyan-400 focus:border-cyan-400 outline-none transition-all" placeholder="Enter phone number">
                    </div>
                </div>
            </div>

            <!-- Add More Trustees Button -->
            <div class="text-center">
                <button type="button" onclick="addTrustee()" 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 Trustees
                </button>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="flex justify-between">
            <a href="{{ route('client.will.assets') }}" 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> Continue to Allowances
            </button>
        </div>
    </form>

    <script>
        let trusteeCount = 1; // Start with 1 trustee (we already have trustee 0)

        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-cyan-400 focus:border-cyan-400 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-cyan-400 focus:border-cyan-400 outline-none transition-all" placeholder="Enter NRIC or Passport">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Nationality</label>
                        <input type="text" name="trustees[${trusteeCount}][nationality]" 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 nationality">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Relationship</label>
                        <input type="text" name="trustees[${trusteeCount}][relationship]" 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 relationship">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Gender</label>
                        <div class="flex space-x-4">
                            <label class="flex items-center">
                                <input type="radio" name="trustees[${trusteeCount}][gender]" value="M" class="mr-2">
                                <span class="text-sm">M</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="trustees[${trusteeCount}][gender]" value="F" class="mr-2">
                                <span class="text-sm">F</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">e-Mail</label>
                        <input type="email" name="trustees[${trusteeCount}][email]" 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 email">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tel No.</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-cyan-400 focus:border-cyan-400 outline-none transition-all" placeholder="Enter phone number">
                    </div>
                </div>
            `;
            
            container.appendChild(newTrustee);
            trusteeCount++;
        }
    </script>
@endsection