@php
    $hasEditableFields = blank($user->phone)
        || blank($user->gender)
        || blank($user->dob)
        || blank($user->father_name)
        || blank($user->pan_number);
@endphp

<x-card class="!p-0 overflow-hidden">
    <div class="border-b border-slate-100 bg-slate-50/50 px-6 py-4">
        <div class="flex items-center gap-3">
            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-800 text-white">
                <i class="bi bi-person-vcard"></i>
            </span>
            <div>
                <h3 class="text-base font-semibold text-slate-900">Basic Info</h3>
                <p class="text-sm text-slate-500">Personal details for your employee record</p>
            </div>
        </div>
    </div>

    @if($hasEditableFields)
        <form action="{{ route('settings.profile.basic.update') }}" method="post" class="space-y-6 p-6" autocomplete="off">
            @csrf
            @method('PUT')

            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <label for="employee_number_display" class="block text-sm font-medium text-slate-700">Employee Number</label>
                    <input type="text" id="employee_number_display" value="{{ $user->employee_number ?? '—' }}" readonly
                           class="mt-1.5 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-600">
                    <p class="mt-1 text-xs text-slate-400">Contact HR to update</p>
                </div>
                <div>
                    <label for="status_display" class="block text-sm font-medium text-slate-700">Status</label>
                    <input type="text" id="status_display" value="{{ ucfirst($user->status ?? 'active') }}" readonly
                           class="mt-1.5 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-600">
                    <p class="mt-1 text-xs text-slate-400">Contact HR to update</p>
                </div>

                <div>
                    <label for="phone" class="block text-sm font-medium text-slate-700">Phone</label>
                    @if(filled($user->phone))
                        <input type="text" id="phone_display" value="{{ $user->phone }}" readonly
                               class="mt-1.5 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-600">
                        <p class="mt-1 text-xs text-slate-400">Already saved — contact HR to change</p>
                    @else
                        <div class="mt-1.5 flex gap-2">
                            <div class="inline-flex items-center rounded-lg border border-slate-300 bg-slate-100 px-3 py-2.5 text-sm font-medium text-slate-700">+91</div>
                            <input type="text" name="phone" id="phone" value="{{ old('phone', $user->phone) }}"
                                   class="min-w-0 flex-1 rounded-lg border border-slate-300 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">
                        </div>
                        @error('phone') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    @endif
                </div>

                @include('settings.profile.partials.self-service-field', [
                    'name' => 'gender',
                    'label' => 'Gender',
                    'userValue' => $user->gender,
                    'type' => 'select',
                    'options' => [
                        ['value' => 'male', 'label' => 'Male'],
                        ['value' => 'female', 'label' => 'Female'],
                        ['value' => 'other', 'label' => 'Other'],
                    ],
                ])

                @include('settings.profile.partials.self-service-field', [
                    'name' => 'dob',
                    'label' => 'Date of Birth',
                    'userValue' => $user->dob,
                    'type' => 'date',
                    'max' => now()->format('Y-m-d'),
                ])

                @include('settings.profile.partials.self-service-field', [
                    'name' => 'father_name',
                    'label' => 'Father Name',
                    'userValue' => $user->father_name,
                ])

                @include('settings.profile.partials.self-service-field', [
                    'name' => 'pan_number',
                    'label' => 'PAN Number',
                    'userValue' => $user->pan_number,
                    'placeholder' => 'ABCDE1234F',
                    'uppercase' => true,
                    'autocomplete' => 'off',
                    'wrapperClass' => 'sm:col-span-2 lg:col-span-3',
                    'inputClass' => 'mt-1.5 w-full max-w-xs rounded-lg border border-slate-300 px-3 py-2.5 text-sm uppercase focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20',
                ])
            </div>

            <div class="flex justify-end border-t border-slate-100 pt-4">
                <button type="submit" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:opacity-90">
                    Save basic info
                </button>
            </div>
        </form>
    @else
        <div class="space-y-6 p-6">
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Employee Number</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->employee_number ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Status</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ ucfirst($user->status ?? 'active') }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Phone</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->phone ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Gender</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->gender ? ucfirst($user->gender) : '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Date of Birth</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->dob?->format('M d, Y') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Father Name</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->father_name ?? '—' }}</dd>
                </div>
                <div class="sm:col-span-2 lg:col-span-3">
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">PAN Number</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->pan_number ?? '—' }}</dd>
                </div>
            </div>
            <p class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
                All details on this section are saved. Contact HR to request changes.
            </p>
        </div>
    @endif
</x-card>