@extends('layouts.portal')

@section('title', 'Create New Trust - Step 2')
@section('page_title', 'Create New Trust - Step 2')

@section('sidebar')
    @include('agent.partials.sidebar', ['active' => 'trusts'])
@endsection

@section('content')
    <!-- Modern Header with Gradient Colors (RED THEME) -->
    <div class="bg-gradient-to-r from-red-700 via-red-800 to-red-900 border-b border-red-700 p-8 relative overflow-hidden sticky top-0 z-50">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full -mr-32 -mt-32 opacity-10"></div>
        
        <div class="w-full relative z-10">
            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                <div class="flex items-center gap-5">
                    <div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center shadow-lg border border-red-200">
                        <i class="fas fa-handshake text-red-600 text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-semibold text-white tracking-wide" style="font-family: 'Inter', sans-serif;">Trust Details</h1>
                        <p class="text-red-100 mt-1" style="font-family: 'Inter', sans-serif;">Configure Trust Type & Information - Step 2 of 3</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="text-right">
                        <p class="text-sm text-red-200" style="font-family: 'Inter', sans-serif;">Progress</p>
                        <p class="text-lg font-bold text-white" style="font-family: 'Inter', sans-serif;">Step 2 of 3</p>
                    </div>
                    <div class="w-32 bg-red-800 h-2 rounded-full overflow-hidden">
                        <div class="bg-white h-2" style="width: 66%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Breadcrumb -->
    <div class="w-full px-8 mb-6 pt-8">
        <div class="flex items-center text-sm text-gray-600" style="font-family: 'Inter', sans-serif;">
            <a href="{{ route('agent.trusts.index') }}" class="hover:text-gray-900">My Trusts</a>
            <i class="fas fa-chevron-right mx-2 text-xs"></i>
            <span class="text-gray-900">Trust Details</span>
        </div>
    </div>

    <!-- Error Messages -->
    @if($errors->any())
        <div class="max-w-6xl mx-auto px-8 mb-6">
            <div style="background: #fff5f5; border-left: 4px solid #dc2626; padding: 16px; border-radius: 8px; display: flex; gap: 12px; align-items: flex-start;">
                <i class="fas fa-exclamation-circle" style="color: #dc2626; margin-top: 2px; flex-shrink: 0;"></i>
                <div>
                    <strong style="color: #dc2626;">Please correct the following errors:</strong>
                    <ul style="list-style: none; padding: 0; margin: 8px 0 0 0;">
                        @foreach($errors->all() as $error)
                            <li style="color: #991b1b; font-size: 14px; margin-top: 4px;">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    <div class="max-w-6xl mx-auto">
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 relative overflow-hidden">
            <!-- Decorative Bubbles -->
            <div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-red-100 to-red-200 rounded-full -mr-16 -mt-16 opacity-30"></div>
            <div class="absolute bottom-0 left-0 w-24 h-24 bg-gradient-to-br from-red-50 to-red-100 rounded-full -ml-12 -mb-12 opacity-20"></div>
            
            <div class="relative z-10">
                <!-- Form -->
                <form action="{{ route('agent.trusts.store-step2') }}" method="POST" class="space-y-6">
                    @csrf
                    <input type="hidden" name="step" value="2">
                    <input type="hidden" name="trustor_id" value="{{ session('trustor_id') ?? '' }}">

                    <!-- 1. Trust Type Selection -->
                    <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                        <div class="flex items-center mb-6">
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-red-600 font-bold mr-3 border-2 border-red-200">1</div>
                            <h4 class="text-md font-semibold text-gray-800">Select Trust Type</h4>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @php
                                $trustTypes = [
                                    ['value' => 'testamentary', 'label' => 'Testamentary', 'icon' => 'fa-file-contract'],
                                    ['value' => 'living_trust', 'label' => 'Living Trust', 'icon' => 'fa-person-hiking'],
                                    ['value' => 'family_legacy', 'label' => 'Family Legacy', 'icon' => 'fa-users'],
                                    ['value' => 'retirement', 'label' => 'Retirement Trust', 'icon' => 'fa-piggy-bank'],
                                    ['value' => 'business', 'label' => 'Business Trust', 'icon' => 'fa-briefcase'],
                                ];
                            @endphp

                            @foreach($trustTypes as $type)
                                <label class="relative cursor-pointer">
                                    <input type="checkbox" name="trust_type" value="{{ $type['value'] }}" class="hidden peer" 
                                           {{ old('trust_type') == $type['value'] ? 'checked' : '' }}>
                                    <div class="p-4 border-2 border-gray-300 rounded-lg peer-checked:border-red-600 peer-checked:bg-red-50 transition-all hover:border-red-400">
                                        <i class="fas {{ $type['icon'] }} text-red-600 text-2xl mb-2"></i>
                                        <p class="font-medium text-gray-800">{{ $type['label'] }}</p>
                                    </div>
                                </label>
                            @endforeach
                        </div>

                        @error('trust_type')
                            <div class="text-red-600 mt-2 text-sm">
                                <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- 2. Trust Name -->
                    <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                        <div class="flex items-center mb-6">
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-red-600 font-bold mr-3 border-2 border-red-200">2</div>
                            <h4 class="text-md font-semibold text-gray-800">Trust Name</h4>
                        </div>

                        <div class="space-y-4">
                            <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-bookmark text-red-500 mr-2"></i>Please give a name to your trust <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="text" id="trust_name" name="trust_name" required 
                                       value="{{ old('trust_name') }}"
                                       class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base @error('trust_name') border-red-500 @enderror"
                                       placeholder="e.g., John Smith Family Trust" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-bookmark absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                            </div>
                            @error('trust_name')
                                <div class="text-red-600 mt-2 text-sm">
                                    <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>

                    <!-- 3. Purpose of Trust -->
                    <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                        <div class="flex items-center mb-6">
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-red-600 font-bold mr-3 border-2 border-red-200">3</div>
                            <h4 class="text-md font-semibold text-gray-800">Purpose of Trust</h4>
                        </div>

                        <div class="space-y-4">
                            <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-target text-red-500 mr-2"></i>State the purpose of this trust <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <textarea id="trust_purpose" name="trust_purpose" rows="4" required
                                          class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white resize-none text-base @error('trust_purpose') border-red-500 @enderror"
                                          placeholder="Describe the main purpose of this trust (e.g., wealth preservation, education funds, charitable giving, etc.)" style="font-family: 'Inter', sans-serif;">{{ old('trust_purpose') }}</textarea>
                                <i class="fas fa-target absolute left-4 top-4 text-gray-400 text-lg"></i>
                            </div>
                            @error('trust_purpose')
                                <div class="text-red-600 mt-2 text-sm">
                                    <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>

                    <!-- 4. Existing Will Information -->
                    <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                        <div class="flex items-center mb-6">
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-red-600 font-bold mr-3 border-2 border-red-200">4</div>
                            <h4 class="text-md font-semibold text-gray-800">Existing Will</h4>
                        </div>

                        <div class="space-y-4 mb-6">
                            <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-question-circle text-red-500 mr-2"></i>Do you have an existing will? <span class="text-red-500">*</span>
                            </label>
                            <div class="flex gap-4">
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="has_existing_will" value="yes" class="mr-3" id="hasWillYes"
                                           {{ old('has_existing_will') == 'yes' ? 'checked' : '' }}>
                                    <span class="text-gray-700 font-medium">Yes</span>
                                </label>
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="has_existing_will" value="no" class="mr-3" id="hasWillNo"
                                           {{ old('has_existing_will') == 'no' || !old('has_existing_will') ? 'checked' : '' }}>
                                    <span class="text-gray-700 font-medium">No</span>
                                </label>
                            </div>
                            @error('has_existing_will')
                                <div class="text-red-600 mt-2 text-sm">
                                    <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                </div>
                            @enderror
                        </div>

                        <!-- Existing Will Details (shown when Yes is selected) -->
                        <div id="willDetailsSection" class="hidden space-y-4 p-6 bg-blue-50 rounded-lg border-2 border-blue-200">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Will Date -->
                                <div class="space-y-4">
                                    <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-calendar text-red-500 mr-2"></i>Will Date
                                    </label>
                                    <input type="date" name="existing_will_date"
                                           value="{{ old('existing_will_date') }}"
                                           class="w-full pl-4 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           style="font-family: 'Inter', sans-serif;">
                                </div>

                                <!-- Will Number -->
                                <div class="space-y-4">
                                    <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-hashtag text-red-500 mr-2"></i>Will Number
                                    </label>
                                    <input type="text" name="existing_will_number"
                                           value="{{ old('existing_will_number') }}"
                                           class="w-full pl-4 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           placeholder="Enter will number" style="font-family: 'Inter', sans-serif;">
                                </div>

                                <!-- Company Name -->
                                <div class="space-y-4">
                                    <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-building text-red-500 mr-2"></i>Company Name
                                    </label>
                                    <input type="text" name="existing_company_name"
                                           value="{{ old('existing_company_name') }}"
                                           class="w-full pl-4 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           placeholder="Company name" style="font-family: 'Inter', sans-serif;">
                                </div>

                                <!-- Tel No -->
                                <div class="space-y-4">
                                    <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-phone text-red-500 mr-2"></i>Telephone Number
                                    </label>
                                    <input type="tel" name="existing_tel_no"
                                           value="{{ old('existing_tel_no') }}"
                                           class="w-full pl-4 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                           placeholder="Tel no" style="font-family: 'Inter', sans-serif;">
                                </div>
                            </div>

                            <!-- Address -->
                            <div class="space-y-4">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-map-marker-alt text-red-500 mr-2"></i>Address
                                </label>
                                <textarea name="existing_address" rows="3"
                                          class="w-full pl-4 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white resize-none text-base"
                                          placeholder="Company address" style="font-family: 'Inter', sans-serif;">{{ old('existing_address') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- 5. Trust Lifetime -->
                    <div class="bg-white rounded-xl p-6 border-2 border-gray-100 shadow-md">
                        <div class="flex items-center mb-6">
                            <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-red-600 font-bold mr-3 border-2 border-red-200">5</div>
                            <h4 class="text-md font-semibold text-gray-800">Trust Lifetime</h4>
                        </div>

                        <div class="space-y-4">
                            <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                <i class="fas fa-hourglass-end text-red-500 mr-2"></i>What is the intended lifetime of this trust? <span class="text-red-500">*</span>
                            </label>

                            <div class="space-y-3">
                                @php
                                    $lifetimeOptions = [
                                        ['value' => 'perpetuity', 'label' => 'In Perpetuity (Forever)', 'desc' => 'Trust continues indefinitely'],
                                        ['value' => 'until_funds_utilized', 'label' => 'Until Funds are Fully Utilized', 'desc' => 'Trust ends when all funds are distributed'],
                                        ['value' => 'number_of_years', 'label' => 'For a Specified Number of Years', 'desc' => 'Select duration below'],
                                    ];
                                @endphp

                                @foreach($lifetimeOptions as $option)
                                    <label class="cursor-pointer">
                                        <input type="radio" name="trust_lifetime" value="{{ $option['value'] }}" 
                                               class="mr-3" id="lifetime_{{ $option['value'] }}"
                                               {{ old('trust_lifetime') == $option['value'] ? 'checked' : '' }}>
                                        <span class="font-medium text-gray-800">{{ $option['label'] }}</span>
                                        <span class="text-sm text-gray-600">— {{ $option['desc'] }}</span>
                                    </label>
                                @endforeach
                            </div>

                            <!-- Years Selector (shown when number_of_years is selected) -->
                            <div id="yearsSection" class="hidden mt-4 p-4 bg-green-50 rounded-lg border-2 border-green-200">
                                <label class="block text-base font-medium text-gray-700 mb-3" style="font-family: 'Inter', sans-serif;">
                                    <i class="fas fa-calendar-days text-red-500 mr-2"></i>Select Number of Years <span class="text-red-500">*</span>
                                </label>
                                <select name="trust_years" class="w-full md:w-48 pl-4 pr-4 py-4 border border-gray-300 rounded-xl focus:ring-4 focus:ring-red-100 focus:border-red-500 text-gray-900 bg-white text-base"
                                        style="font-family: 'Inter', sans-serif;">
                                    <option value="">-- Select Years --</option>
                                    <option value="10" {{ old('trust_years') == '10' ? 'selected' : '' }}>10 Years</option>
                                    <option value="15" {{ old('trust_years') == '15' ? 'selected' : '' }}>15 Years</option>
                                    <option value="20" {{ old('trust_years') == '20' ? 'selected' : '' }}>20 Years</option>
                                    <option value="25" {{ old('trust_years') == '25' ? 'selected' : '' }}>25 Years</option>
                                    <option value="50" {{ old('trust_years') == '50' ? 'selected' : '' }}>50 Years</option>
                                    <option value="75" {{ old('trust_years') == '75' ? 'selected' : '' }}>75 Years</option>
                                </select>
                            </div>

                            @error('trust_lifetime')
                                <div class="text-red-600 mt-2 text-sm">
                                    <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                </div>
                            @enderror
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="flex flex-col md:flex-row gap-4 justify-between mt-8 pt-6 border-t-2 border-gray-100">
                        <a href="{{ route('agent.trusts.create') }}" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium text-center">
                            <i class="fas fa-arrow-left mr-2"></i>Back: Trustor Details
                        </a>
                        <button type="submit" class="px-6 py-3 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-xl hover:from-red-700 hover:to-red-800 transition-all font-medium shadow-lg">
                            <i class="fas fa-arrow-right mr-2"></i>Next: Fund the Trust
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Show/hide existing will details
        document.getElementById('hasWillYes').addEventListener('change', function() {
            document.getElementById('willDetailsSection').classList.remove('hidden');
        });
        document.getElementById('hasWillNo').addEventListener('change', function() {
            document.getElementById('willDetailsSection').classList.add('hidden');
        });

        // Show/hide years selector based on lifetime selection
        document.querySelectorAll('input[name="trust_lifetime"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const yearsSection = document.getElementById('yearsSection');
                if (this.value === 'number_of_years') {
                    yearsSection.classList.remove('hidden');
                } else {
                    yearsSection.classList.add('hidden');
                }
            });
        });

        // Initialize on page load
        window.addEventListener('DOMContentLoaded', function() {
            const selectedLifetime = document.querySelector('input[name="trust_lifetime"]:checked');
            if (selectedLifetime && selectedLifetime.value === 'number_of_years') {
                document.getElementById('yearsSection').classList.remove('hidden');
            }

            const selectedWill = document.querySelector('input[name="has_existing_will"]:checked');
            if (selectedWill && selectedWill.value === 'yes') {
                document.getElementById('willDetailsSection').classList.remove('hidden');
            }
        });
    </script>
@endsection