@extends('layouts.portal')

@section('title', 'Create New Trust')
@section('page_title', 'Create New Trust')

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

@section('content')
    <!-- Modern Header with Gradient Colors and Bubble Design (RED THEME - MATCHING APP STYLE) -->
    <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">
        <!-- Decorative Bubbles -->
        <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;">Create New Trust</h1>
                        <p class="text-red-100 mt-1" style="font-family: 'Inter', sans-serif;">Enter Trustor Personal Details - Step 1 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 1 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: 33%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Breadcrumb with Top Space -->
    <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">Create Trust</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">
                <!-- Section Header -->
                <div class="mb-8">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-12 h-12 bg-red-200 rounded-xl flex items-center justify-center shadow-lg border border-red-200">
                            <i class="fas fa-user-circle text-white text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold text-gray-700" style="font-family: 'Inter', sans-serif;">Trustor Personal Details</h3>
                            <p class="text-gray-600 text-lg" style="font-family: 'Inter', sans-serif;">Person who is creating the trust</p>
                        </div>
                    </div>

                    <!-- Info Box -->
                    <div class="mb-6 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200 shadow-lg">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-info-circle text-blue-600 text-lg mt-1"></i>
                            <div>
                                <p class="text-white font-medium">Please provide complete and accurate personal information.</p>
                                <p class="text-white text-sm mt-1">All fields marked with <span class="text-red-600">*</span> are required.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Form -->
                    <form action="{{ route('agent.trusts.store-creator-details') }}" method="POST" class="space-y-6">
                        @csrf
                        <input type="hidden" name="step" value="1">

                        <!-- 0. Client 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">0</div>
                                <h4 class="text-md font-semibold text-gray-800">Select Client</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-users text-red-500 mr-2"></i>Client <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <!-- Always hidden input for client_id -->
                                    <input type="hidden" id="client_id" name="client_id" value="{{ $preSelectedClient->id ?? old('client_id', '') }}" required>
                                    
                                    @if(isset($preSelectedClient) && $preSelectedClient)
                                        <!-- Client is selected -->
                                        <div class="w-full pl-12 pr-4 py-4 border border-green-300 rounded-xl bg-green-50 text-gray-900 text-base" style="font-family: 'Inter', sans-serif;">
                                            <strong>{{ $preSelectedClient->first_name }} {{ $preSelectedClient->last_name }}</strong><br>
                                            <small style="color: #666;">{{ $preSelectedClient->email }}</small>
                                            <i class="fas fa-check absolute right-4 top-1/2 transform -translate-y-1/2 text-green-600 text-lg"></i>
                                        </div>
                                    @else
                                        <!-- No client selected yet -->
                                        <div class="w-full pl-12 pr-4 py-4 border border-red-300 rounded-xl bg-red-50 text-gray-600 text-base" style="font-family: 'Inter', sans-serif;">
                                            <span class="text-red-600"><strong>⚠️ No client selected</strong></span><br>
                                            <small>Please access using referral link: ?client_id=XXX</small>
                                            <i class="fas fa-exclamation-circle absolute right-4 top-1/2 transform -translate-y-1/2 text-red-600 text-lg"></i>
                                        </div>
                                    @endif
                                </div>
                                @error('client_id')
                                    <div class="text-red-600 mt-2 text-sm">
                                        <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- Name Section -->
                        <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">Name Information</h4>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- First 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-user text-red-500 mr-2"></i>First Name <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="text" id="first_name" name="first_name" required 
                                               value="{{ old('first_name', session('trust_step1.first_name', $preSelectedClient->first_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('first_name') border-red-500 @enderror"
                                               placeholder="Enter first name" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-user absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('first_name')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <!-- Last 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-user text-red-500 mr-2"></i>Last Name <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="text" id="last_name" name="last_name" required 
                                               value="{{ old('last_name', session('trust_step1.last_name', $preSelectedClient->last_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('last_name') border-red-500 @enderror"
                                               placeholder="Enter last name" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-user absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('last_name')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- NRIC & DOB Section -->
                        <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">Identification</h4>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- NRIC -->
                                <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-id-card text-red-500 mr-2"></i>NRIC / ID Number <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="text" id="nric" name="nric" required 
                                               value="{{ old('nric', session('trust_step1.nric', $preSelectedClient->ic_number ?? '')) }}"
                                               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('nric') border-red-500 @enderror"
                                               placeholder="e.g., 123456-12-1234" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-id-card absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('nric')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <!-- DOB -->
                                <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>Date of Birth <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="date" id="date_of_birth" name="date_of_birth" required 
                                               value="{{ old('date_of_birth', session('trust_step1.date_of_birth', $preSelectedClient ? $preSelectedClient->date_of_birth?->format('Y-m-d') : '')) }}"
                                               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('date_of_birth') border-red-500 @enderror"
                                               style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-calendar absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('date_of_birth')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Nationality & Gender Section -->
                        <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">Demographics</h4>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Nationality -->
                                <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-globe text-red-500 mr-2"></i>Nationality
                                    </label>
                                    <div class="relative">
                                        <input type="text" id="nationality" name="nationality" 
                                               value="{{ old('nationality', session('trust_step1.nationality', $preSelectedClient->nationality ?? '')) }}"
                                               class="w-full pl-12 pr-4 py-4 border border-gray-200 rounded-xl bg-gray-50 text-gray-700 text-base cursor-not-allowed"
                                               placeholder="Auto-filled from client profile" style="font-family: 'Inter', sans-serif;" >
                                        <i class="fas fa-globe absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('nationality')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <!-- Gender -->
                                <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-venus-mars text-red-500 mr-2"></i>Gender
                                    </label>
                                    <div class="relative">
                                        <input type="text" id="gender" name="gender" 
                                               value="{{ old('gender', session('trust_step1.gender', $preSelectedClient->gender ?? '')) }}"
                                               class="w-full pl-12 pr-4 py-4 border border-gray-200 rounded-xl bg-gray-50 text-gray-700 text-base cursor-not-allowed"
                                               placeholder="Auto-filled from client profile" style="font-family: 'Inter', sans-serif;" >
                                        <i class="fas fa-venus-mars absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('gender')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                                    </div>
                                    @error('gender')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Contact Information Section -->
                        <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">Contact Information</h4>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Email -->
                                <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-envelope text-red-500 mr-2"></i>Email Address <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="email" id="email" name="email" required 
                                               value="{{ old('email', session('trust_step1.email', $preSelectedClient->email ?? '')) }}"
                                               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('email') border-red-500 @enderror"
                                               placeholder="user@example.com" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-envelope absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('email')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <!-- Phone -->
                                <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>Phone Number <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="tel" id="phone_number" name="phone_number" required 
                                               value="{{ old('phone_number', session('trust_step1.phone_number', $preSelectedClient->phone ?? '')) }}"
                                               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('phone_number') border-red-500 @enderror"
                                               placeholder="e.g., +60123456789" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-phone absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('phone_number')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Address Section -->
                        <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">Residential Address</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-map-marker-alt text-red-500 mr-2"></i>Address <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <textarea id="address" name="address" rows="3" 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('address') border-red-500 @enderror"
                                              placeholder="Enter complete residential address" style="font-family: 'Inter', sans-serif;">{{ old('address', session('trust_step1.address', $preSelectedClient->address ?? '')) }}</textarea>
                                    <i class="fas fa-map-marker-alt absolute left-4 top-3 text-gray-400 text-lg"></i>
                                </div>
                                @error('address')
                                    <div class="text-red-600 mt-2 text-sm">
                                        <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <!-- Particulars of Trust Creator Section -->
                        <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">6</div>
                                <h4 class="text-md font-semibold text-gray-800">Particulars of Trust Creator</h4>
                            </div>

                            <!-- Creator Name Section -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <!-- Creator First 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-user text-red-500 mr-2"></i>First Name <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="text" id="creator_first_name" name="creator_first_name" required 
                                               value="{{ old('creator_first_name', session('trust_step1.creator_first_name', $preSelectedClient->first_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('creator_first_name') border-red-500 @enderror"
                                               placeholder="Enter first name" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-user absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('creator_first_name')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <!-- Creator Last 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-user text-red-500 mr-2"></i>Last Name <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="text" id="creator_last_name" name="creator_last_name" required 
                                               value="{{ old('creator_last_name', session('trust_step1.creator_last_name', $preSelectedClient->last_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('creator_last_name') border-red-500 @enderror"
                                               placeholder="Enter last name" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-user absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('creator_last_name')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Creator NRIC & DOB Section -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <!-- Creator NRIC -->
                                <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-id-card text-red-500 mr-2"></i>NRIC / ID Number <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="text" id="creator_nric" name="creator_nric" required 
                                               value="{{ old('creator_nric', session('trust_step1.creator_nric', $preSelectedClient->ic_number ?? '')) }}"
                                               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('creator_nric') border-red-500 @enderror"
                                               placeholder="e.g., 123456-12-1234" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-id-card absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('creator_nric')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <!-- Creator DOB -->
                                <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>Date of Birth <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="date" id="creator_date_of_birth" name="creator_date_of_birth" required 
                                               value="{{ old('creator_date_of_birth', session('trust_step1.creator_date_of_birth', $preSelectedClient ? $preSelectedClient->date_of_birth?->format('Y-m-d') : '')) }}"
                                               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('creator_date_of_birth') border-red-500 @enderror"
                                               style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-calendar absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('creator_date_of_birth')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Creator Nationality & Gender Section -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <!-- Creator Nationality -->
                                <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-globe text-red-500 mr-2"></i>Nationality
                                    </label>
                                    <div class="relative">
                                        <select id="creator_nationality" name="creator_nationality"
                                                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('creator_nationality') border-red-500 @enderror"
                                                style="font-family: 'Inter', sans-serif;">
                                            <option value="">-- Select Nationality --</option>
                                            <option value="Malaysian" {{ old('creator_nationality', session('trust_step1.creator_nationality', $preSelectedClient->nationality ?? '')) === 'Malaysian' ? 'selected' : '' }}>Malaysian</option>
                                            <option value="Other" {{ old('creator_nationality', session('trust_step1.creator_nationality', $preSelectedClient->nationality ?? '')) === 'Other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                        <i class="fas fa-globe absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('creator_nationality')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <!-- Creator Gender -->
                                <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-venus-mars text-red-500 mr-2"></i>Gender
                                    </label>
                                    <div class="relative">
                                        <select id="creator_gender" name="creator_gender"
                                                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('creator_gender') border-red-500 @enderror"
                                                style="font-family: 'Inter', sans-serif;">
                                            <option value="">-- Select Gender --</option>
                                            <option value="Male" {{ old('creator_gender', session('trust_step1.creator_gender', $preSelectedClient->gender ?? '')) === 'Male' ? 'selected' : '' }}>Male</option>
                                            <option value="Female" {{ old('creator_gender', session('trust_step1.creator_gender', $preSelectedClient->gender ?? '')) === 'Female' ? 'selected' : '' }}>Female</option>
                                            <option value="Other" {{ old('creator_gender', session('trust_step1.creator_gender', $preSelectedClient->gender ?? '')) === 'Other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                        <i class="fas fa-venus-mars absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('creator_gender')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Creator Contact Information Section -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <!-- Creator Email -->
                                <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-envelope text-red-500 mr-2"></i>Email Address <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="email" id="creator_email" name="creator_email" required 
                                               value="{{ old('creator_email', session('trust_step1.creator_email', $preSelectedClient->email ?? '')) }}"
                                               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('creator_email') border-red-500 @enderror"
                                               placeholder="user@example.com" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-envelope absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('creator_email')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <!-- Creator Phone -->
                                <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>Phone Number <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <input type="tel" id="creator_phone_number" name="creator_phone_number" required 
                                               value="{{ old('creator_phone_number', session('trust_step1.creator_phone_number', $preSelectedClient->phone ?? '')) }}"
                                               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('creator_phone_number') border-red-500 @enderror"
                                               placeholder="e.g., +60123456789" style="font-family: 'Inter', sans-serif;">
                                        <i class="fas fa-phone absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                                    </div>
                                    @error('creator_phone_number')
                                        <div class="text-red-600 mt-2 text-sm">
                                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Creator Address Section -->
                            <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 <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <textarea id="creator_address" name="creator_address" rows="3" 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('creator_address') border-red-500 @enderror"
                                              placeholder="Enter complete residential address" style="font-family: 'Inter', sans-serif;">{{ old('creator_address', session('trust_step1.creator_address', $preSelectedClient->address ?? '')) }}</textarea>
                                    <i class="fas fa-map-marker-alt absolute left-4 top-3 text-gray-400 text-lg"></i>
                                </div>
                                @error('creator_address')
                                    <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.index') }}" 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-times mr-2"></i>Cancel
                            </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: Trust Information
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        console.log('=== CREATE TRUST PAGE DEBUG ===');
        console.log('Session trust_step1 data:', @json(session('trust_step1')));
        console.log('Pre-selected Client:', @json($preSelectedClient));
        console.log('Existing Trust:', @json($existingTrust ? ['id' => $existingTrust->id, 'trust_name' => $existingTrust->trust_name, 'trust_creator' => $existingTrust->trust_creator] : null));
    </script>
@endsection