@php
    $hasEditableFields = blank($user->uan_number)
        || blank($user->work_state)
        || blank($user->pt_location);
@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-briefcase"></i>
            </span>
            <div>
                <h3 class="text-base font-semibold text-slate-900">Work Info</h3>
                <p class="text-sm text-slate-500">Employment details and statutory information</p>
            </div>
        </div>
    </div>

    <div class="space-y-6 p-6">
        <div>
            <h4 class="mb-3 text-sm font-semibold text-slate-800">Employment Dates</h4>
            <p class="mb-4 text-xs text-slate-500">Managed by HR — contact HR to request changes.</p>
            <dl 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">Joining Date</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->joining_date?->format('M d, Y') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Registration Date</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->registration_date?->format('M d, Y') ?? $user->created_at?->format('M d, Y') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Confirmation Date</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->confirmation_date?->format('M d, Y') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Probation End Date</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->probation_end_date?->format('M d, Y') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">PF Join Date</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->pf_join_date?->format('M d, Y') ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Last Working Day</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->last_working_date?->format('M d, Y') ?? '—' }}</dd>
                </div>
            </dl>
        </div>

        <div class="border-t border-slate-100 pt-6">
            <h4 class="mb-3 text-sm font-semibold text-slate-800">Work Details</h4>
            <dl 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">Department</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->department?->name ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Designation</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->designation?->name ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Location</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->location?->name ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Shift</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->shift?->name ?? '—' }}</dd>
                </div>
                <div class="sm:col-span-2">
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Reporting Manager</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->reportingManager?->name ?? '—' }}</dd>
                </div>
            </dl>
        </div>

        <div class="border-t border-slate-100 pt-6">
            <h4 class="mb-1 text-sm font-semibold text-slate-800">Statutory details</h4>
            @if($hasEditableFields)
                <p class="mb-4 text-xs text-slate-500">Fill empty fields once for payroll and compliance. Saved fields cannot be changed here.</p>
                <form action="{{ route('settings.profile.work.update') }}" method="post">
                    @csrf
                    @method('PUT')
                    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        @include('settings.profile.partials.self-service-field', [
                            'name' => 'work_state',
                            'label' => 'Work State',
                            'userValue' => $user->work_state,
                            'placeholder' => 'Telangana',
                        ])
                        @include('settings.profile.partials.self-service-field', [
                            'name' => 'pt_location',
                            'label' => 'PT Location',
                            'userValue' => $user->pt_location,
                        ])
                        @include('settings.profile.partials.self-service-field', [
                            'name' => 'uan_number',
                            'label' => 'UAN Number',
                            'userValue' => $user->uan_number,
                        ])
                    </div>
                    <div class="mt-6 flex justify-end">
                        <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 work info
                        </button>
                    </div>
                </form>
            @else
                <dl class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Work State</dt>
                        <dd class="mt-1 text-sm text-slate-900">{{ $user->work_state ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">PT Location</dt>
                        <dd class="mt-1 text-sm text-slate-900">{{ $user->pt_location ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">UAN Number</dt>
                        <dd class="mt-1 text-sm text-slate-900">{{ $user->uan_number ?? '—' }}</dd>
                    </div>
                </dl>
                <p class="mt-4 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>
            @endif
        </div>
    </div>
</x-card>