@extends('layouts.portal')

@section('title', 'Complete Client Profile')
@section('page_title', 'Complete Client Profile')
@section('page_subtitle', 'Fill in remaining client information')

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

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">Complete Client Profile</h1>
                <p class="text-gray-500 mt-1">Fill in remaining information for {{ $client->first_name }} {{ $client->last_name }}</p>
            </div>
            <a href="{{ route('agent.clients.index') }}" class="text-gray-500 hover:text-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Back to Referrals
            </a>
        </div>
    </div>

    <!-- Progress Steps -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center text-sm font-medium">
                    <i class="fas fa-check"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Basic Info</p>
                    <p class="text-xs text-gray-500">Agent completed</p>
                </div>
            </div>
            
            <div class="flex-1 h-px bg-gray-300 mx-4"></div>
            
            <div class="flex items-center">
                <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center text-sm font-medium">
                    2
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Complete Profile</p>
                    <p class="text-xs text-gray-500">Admin in progress</p>
                </div>
            </div>
            
            <div class="flex-1 h-px bg-gray-300 mx-4"></div>
            
            <div class="flex items-center opacity-50">
                <div class="w-8 h-8 rounded-full bg-gray-300 text-white flex items-center justify-center text-sm font-medium">
                    3
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-gray-800">Active</p>
                    <p class="text-xs text-gray-500">Pending completion</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Form -->
    <form method="POST" action="{{ route('admin.clients.complete', $client->id) }}" class="space-y-6">
        @csrf
        
        <!-- Basic Information (Read-only) -->
        <div class="modern-card p-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Basic Information (Agent Provided)</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">First Name</label>
                    <input type="text" value="{{ $client->first_name }}" readonly class="input-modern bg-gray-50">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
                    <input type="text" value="{{ $client->last_name }}" readonly class="input-modern bg-gray-50">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                    <input type="email" value="{{ $client->email }}" readonly class="input-modern bg-gray-50">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                    <input type="text" value="{{ $client->phone }}" readonly class="input-modern bg-gray-50">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">IC Number</label>
                    <input type="text" value="{{ $client->ic_number }}" readonly class="input-modern bg-gray-50">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Address</label>
                    <input type="text" value="{{ $client->address }}" readonly class="input-modern bg-gray-50">
                </div>
            </div>
        </div>

        <!-- Additional Information (Admin to fill) -->
        <div class="modern-card p-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Complete Client Information</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Country *</label>
                    <select name="country" required class="input-modern">
                        <option value="">Select Country</option>
                        <option value="Malaysia">Malaysia</option>
                        <option value="Singapore">Singapore</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Identification Type *</label>
                    <select name="identification_type" required class="input-modern">
                        <option value="">Select Type</option>
                        <option value="ic">IC Number</option>
                        <option value="passport">Passport</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date of Birth *</label>
                    <x-date-picker name="date_of_birth" required />
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Occupation</label>
                    <input type="text" name="occupation" class="input-modern">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Source of Funds</label>
                    <input type="text" name="source_of_funds" class="input-modern">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status *</label>
                    <select name="status" required class="input-modern">
                        <option value="">Select Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Alternative Phone</label>
                    <input type="text" name="alternative_phone" class="input-modern">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Preferred Contact</label>
                    <select name="preferred_contact" class="input-modern">
                        <option value="">Select Preference</option>
                        <option value="phone">Phone</option>
                        <option value="email">Email</option>
                        <option value="both">Both</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Emergency Contact Name</label>
                    <input type="text" name="emergency_contact_name" class="input-modern">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Emergency Contact Phone</label>
                    <input type="text" name="emergency_contact_phone" class="input-modern">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Emergency Relationship</label>
                    <input type="text" name="emergency_relationship" class="input-modern">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Emergency Email</label>
                    <input type="email" name="emergency_email" class="input-modern">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Account Type</label>
                    <select name="account_type" class="input-modern">
                        <option value="">Select Type</option>
                        <option value="basic">Basic</option>
                        <option value="premium">Premium</option>
                        <option value="vip">VIP</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Assigned Staff</label>
                    <select name="assigned_staff_id" class="input-modern">
                        <option value="">Select Staff</option>
                        @foreach(App\Models\User::where('role', 'staff')->get() as $staff)
                            <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="flex items-center justify-end space-x-4">
            <a href="{{ route('agent.clients.index') }}" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                Cancel
            </a>
            <button type="submit" class="octowill-btn px-6 py-3 rounded-lg text-white hover:shadow-lg transition-all">
                <i class="fas fa-save mr-2"></i>Complete Profile
            </button>
        </div>
    </form>
</div>