@extends('layouts.portal')

@section('title', 'Create Profile')
@section('page_title', 'Step 1: Personal Details')
@section('page_subtitle', 'Complete your profile information')

@section('sidebar')
    @include('client.partials.onboarding-sidebar', ['step' => 1, 'onboardingStep' => $onboardingStep])
@endsection

@section('content')
    @include('components.form-styles')
    
    <!-- Edit Access Banner -->
    @if(!$hasEditAccess)
    <div class="max-w-6xl mx-auto p-6 mb-6">
        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-lock text-yellow-600"></i>
                </div>
                <div>
                    <p class="font-semibold text-yellow-800">Read-Only Mode</p>
                    <p class="text-sm text-yellow-600">Your profile is in read-only mode. To edit, you need to request edit access.</p>
                </div>
            </div>
            <a href="{{ route('client.edit.request', ['section' => 'liabilities']) }}" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors font-medium">
                <i class="fas fa-unlock mr-2"></i>Request Edit Access
            </a>
        </div>
    </div>
    @else
    <div class="max-w-6xl mx-auto p-6 mb-6">
        <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-unlock text-green-600"></i>
                </div>
                <div>
                    <p class="font-semibold text-green-800">Edit Access Active</p>
                    <p class="text-sm text-green-600">You can edit your profile until {{ $editRequest->edit_access_expires_at->format('d M Y, g:i A') }}</p>
                </div>
            </div>
        </div>
    </div>
    @endif
    
    <!-- Modern Progress Steps -->
    <div class="max-w-6xl mx-auto p-6 mb-8">
        <div class="bg-white/90 backdrop-blur-xl rounded-2xl shadow-2xl p-8 border border-white/20">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-red-600 to-red-800 flex items-center justify-center text-white font-bold shadow-xl">
                        <span class="text-lg font-bold">1</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-bold text-gray-900">Personal</p>
                        <p class="text-xs text-red-700 font-medium">Current step</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gradient-to-r from-red-600 to-gray-300 mx-6"></div>
                <div class="flex items-center opacity-60">
                    <div class="w-14 h-14 rounded-2xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">
                        <span class="text-lg font-bold">2</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-700">Family</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gray-300 mx-6"></div>
                <div class="flex items-center opacity-60">
                    <div class="w-14 h-14 rounded-2xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">
                        <span class="text-lg font-bold">3</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-700">KYC</p>
                    </div>
                </div>
                <div class="flex-1 h-1 bg-gray-300 mx-6"></div>
                <div class="flex items-center opacity-60">
                    <div class="w-14 h-14 rounded-2xl bg-gray-200 flex items-center justify-center text-gray-600 font-bold">
                        <span class="text-lg font-bold">4</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-700">Assets</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('components.unified-form', [
        'title' => 'Personal Information',
        'subtitle' => 'Please provide your personal details',
        'action' => route('client.profile.store'),
        'method' => 'POST',
        'submitText' => 'Continue to Family Details',
        'backUrl' => null,
        'showSaveDraft' => $hasEditAccess,
        'disabled' => !$hasEditAccess,
        'icon' => '<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>',
        'sections' => [
            [
                'title' => 'Basic Information',
                'icon' => '<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>',
                'grid' => 'grid-2',
                'readonly' => !$hasEditAccess,
                'fields' => [
                    [
                        'type' => 'text',
                        'name' => 'first_name',
                        'label' => 'First Name',
                        'required' => true,
                        'placeholder' => 'Enter your first name',
                        'value' => trim($onboardingStep->first_name ?? '', '"\''),
                        'readonly' => !$hasEditAccess,
                        'icon' => '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'
                    ],
                    [
                        'type' => 'text',
                        'name' => 'last_name',
                        'label' => 'Last Name',
                        'required' => true,
                        'placeholder' => 'Enter your last name',
                        'value' => trim($onboardingStep->last_name ?? '', '"\''),
                        'readonly' => !$hasEditAccess,
                        'icon' => '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>'
                    ],
                    [
                        'type' => 'email',
                        'name' => 'email',
                        'label' => 'Email Address',
                        'required' => true,
                        'placeholder' => 'your.email@example.com',
                        'value' => trim($onboardingStep->user_email ?? '', '"\''),
                        'readonly' => !$hasEditAccess,
                        'icon' => '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>'
                    ],
                    [
                        'type' => 'tel',
                        'name' => 'phone',
                        'label' => 'Phone Number',
                        'required' => true,
                        'placeholder' => '+60XX-XXXX-XXXX',
                        'value' => trim($onboardingStep->phone ?? '', '"\''),
                        'readonly' => !$hasEditAccess,
                        'icon' => '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>'
                    ],
                    [
                        'type' => 'text',
                        'name' => 'ic_number',
                        'label' => 'IC/Passport Number',
                        'required' => true,
                        'placeholder' => 'e.g., A1234567 or H00000000',
                        'value' => trim($onboardingStep->ic_number ?? '', '"\''),
                        'readonly' => !$hasEditAccess,
                        'icon' => '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/></svg>'
                    ],
                    [
                        'type' => 'text',
                        'name' => 'occupation',
                        'label' => 'Occupation',
                        'placeholder' => 'Your occupation',
                        'value' => trim($onboardingStep->occupation ?? '', '"\''),
                        'readonly' => !$hasEditAccess,
                        'icon' => '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 0h-4V4h4v2z"/></svg>'
                    ]
                ]
            ]
        ]
    ])
@endsection

<script>
// Strip quotes from all form inputs on page load
document.addEventListener('DOMContentLoaded', function() {
    const inputs = document.querySelectorAll('input[type="text"], input[type="email"], input[type="tel"], textarea');
    inputs.forEach(function(input) {
        if (input.value) {
            // Remove surrounding single and double quotes
            input.value = input.value.replace(/^["']|["']$/g, '');
        }
    });
});
</script>