@php
    $complete = $missing === [];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-4xl space-y-6">

        <x-people-tabs />

        <x-page-header
            :title="__('My Details')"
            :subtitle="__('What we need to put you on a payslip and get your money to you. Only you and the payroll team can see this.')" />

        {{-- Progress / what is still outstanding ------------------------- --}}
        <x-card class="p-5 sm:p-6 {{ $complete ? 'border-emerald-200 bg-emerald-50/50' : 'border-amber-200 bg-amber-50/50' }}">
            <div class="flex items-start gap-3">
                <x-icon :name="$complete ? 'check-circle' : 'exclamation-triangle'"
                        class="mt-0.5 h-5 w-5 shrink-0 {{ $complete ? 'text-emerald-500' : 'text-amber-500' }}" />
                <div class="min-w-0 flex-1">
                    <p class="text-sm font-semibold {{ $complete ? 'text-emerald-900' : 'text-amber-900' }}">
                        {{ $complete ? __('Your details are complete') : __('Your details are :pct% complete', ['pct' => $percent]) }}
                    </p>

                    @if ($complete)
                        <p class="mt-0.5 text-sm text-emerald-800">
                            {{ $profile->personal_details_confirmed_at
                                ? __('Last confirmed :when.', ['when' => $profile->personal_details_confirmed_at->timezone(config('app.display_timezone'))->format('d M Y')])
                                : __('Press Save to confirm they are correct.') }}
                        </p>
                    @else
                        <p class="mt-0.5 text-sm text-amber-800">{{ __('Still needed:') }}</p>
                        <ul class="mt-1.5 flex flex-wrap gap-1.5">
                            @foreach ($missing as $label)
                                <li class="rounded-full bg-white px-2.5 py-0.5 text-xs font-medium text-amber-800 ring-1 ring-amber-200">{{ $label }}</li>
                            @endforeach
                        </ul>
                    @endif

                    @if ($recommended)
                        <p class="mt-2 text-sm {{ $complete ? 'text-emerald-800' : 'text-amber-800' }}">
                            {{ __('Also worth adding, though nothing waits on it:') }}
                            {{ implode(', ', array_map(fn ($l) => lcfirst($l), $recommended)) }}.
                        </p>
                    @endif

                    <div class="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-white/70">
                        <div class="h-full rounded-full transition-all {{ $complete ? 'bg-emerald-500' : 'bg-amber-400' }}"
                             style="width: {{ max(4, $percent) }}%"></div>
                    </div>
                </div>
            </div>
        </x-card>

        {{-- Profile photo (recommended, never required) ------------------ --}}
        <x-card class="overflow-hidden">
            <div class="border-b border-slate-100 p-4 sm:p-5">
                <div class="flex items-center gap-2">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Profile photo') }}</h2>
                    <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-500">{{ __('Recommended') }}</span>
                </div>
                <p class="text-xs text-slate-400">
                    {{ __('Puts a face to your name on job cards, approvals and the team directory. Optional, your pay never waits on it.') }}
                </p>
            </div>

            <div class="flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:p-6">
                <img src="{{ auth()->user()->profile_photo_url }}" alt="{{ auth()->user()->name }}"
                     class="h-20 w-20 shrink-0 rounded-full object-cover ring-2 ring-slate-200">

                <div class="min-w-0 flex-1 space-y-3">
                    <div>
                        <input id="photo" type="file" wire:model="photo" accept="image/*"
                            class="block w-full rounded-xl border border-slate-300 text-sm text-slate-600 shadow-sm file:mr-3 file:rounded-l-xl file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-medium file:text-slate-700 hover:file:bg-slate-200" />
                        <p class="mt-1 text-xs text-slate-400">{{ __('A clear head-and-shoulders photo. Up to 5 MB.') }}</p>
                        <x-input-error for="photo" class="mt-2" />
                    </div>

                    <div class="flex flex-wrap items-center gap-3">
                        <x-secondary-button wire:click="uploadPhoto" wire:loading.attr="disabled" wire:target="uploadPhoto,photo" type="button">
                            <x-icon name="cloud-arrow-up" class="-ms-1 me-1.5 h-4 w-4" />
                            <span wire:loading.remove wire:target="uploadPhoto">{{ __('Save photo') }}</span>
                            <span wire:loading wire:target="uploadPhoto">{{ __('Saving…') }}</span>
                        </x-secondary-button>

                        @if (auth()->user()->hasProfilePhoto())
                            <button type="button" wire:click="removePhoto"
                                wire:confirm="{{ __('Remove your profile photo?') }}"
                                class="text-sm font-medium text-slate-500 transition hover:text-rose-600">{{ __('Remove') }}</button>
                        @endif

                        <a href="{{ route('profile.show') }}"
                           class="ms-auto text-sm font-medium text-indigo-600 transition hover:text-indigo-800">
                            {{ __('Account settings') }} &rarr;
                        </a>
                    </div>
                </div>
            </div>
        </x-card>

        {{-- The form ----------------------------------------------------- --}}
        <x-card class="overflow-hidden">
            <div class="border-b border-slate-100 p-4 sm:p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('About you') }}</h2>
                <p class="text-xs text-slate-400">{{ __('Your job title is set by HR. Everything here is yours to keep up to date.') }}</p>
            </div>

            <div class="space-y-5 p-4 sm:p-6">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <x-label for="full_name" :value="__('Full name')" />
                        <x-input id="full_name" class="mt-1 block w-full" wire:model="full_name" />
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('As it appears on your ID. This is the name your payslip is made out to.') }}</p>
                        <x-input-error for="full_name" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="national_id" :value="__('National ID number')" />
                        <x-input id="national_id" class="mt-1 block w-full" wire:model="national_id" placeholder="63-1234567-A-42" />
                        <x-input-error for="national_id" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="date_of_birth" :value="__('Date of birth')" />
                        <x-input id="date_of_birth" type="date" class="mt-1 block w-full" wire:model="date_of_birth" />
                        <x-input-error for="date_of_birth" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="phone" :value="__('Mobile number')" />
                        <x-input id="phone" class="mt-1 block w-full" wire:model="phone" placeholder="+263 77 000 0000" />
                        <x-input-error for="phone" class="mt-2" />
                    </div>
                    {{-- A payslip is your own document and you keep needing it
                         after you leave, so it can go to an address the company
                         does not control. --}}
                    <div>
                        <x-label for="personal_email" :value="__('Personal email (optional)')" />
                        <x-input id="personal_email" type="email" class="mt-1 block w-full" wire:model="personal_email"
                            placeholder="{{ __('you@example.com') }}" />
                        <p class="mt-1 text-[11px] text-slate-400">
                            {{ __('Where your payslip is sent. Leave it blank and it goes to :email, the address you sign in with.', ['email' => auth()->user()->email]) }}
                        </p>
                        <x-input-error for="personal_email" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="gender" :value="__('Gender (optional)')" />
                        <select id="gender" wire:model="gender" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Prefer not to say') }}</option>
                            <option value="female">{{ __('Female') }}</option>
                            <option value="male">{{ __('Male') }}</option>
                            <option value="other">{{ __('Other') }}</option>
                        </select>
                        <x-input-error for="gender" class="mt-2" />
                    </div>
                    {{-- The birth date is on file for payroll and NSSA, the hire
                         date for the employment record. Greeting people with
                         either is a different use of them, so it is their call
                         who hears about the day. --}}
                    <div>
                        <x-label for="celebration_visibility" :value="__('On my birthday and work milestones')" />
                        <select id="celebration_visibility" wire:model="celebration_visibility"
                            class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach (\App\Models\StaffProfile::CELEBRATION_VISIBILITIES as $value => $label)
                                <option value="{{ $value }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Nobody is ever told your age or your date of birth, only that today is your day. Milestones with the company are marked every three months.') }}</p>
                        <x-input-error for="celebration_visibility" class="mt-2" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-label for="address" :value="__('Home address')" />
                        <textarea id="address" wire:model="address" rows="2"
                            class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="address" class="mt-2" />
                    </div>
                </div>

                {{-- Next of kin ------------------------------------------ --}}
                <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4">
                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Next of kin') }}</p>
                    <p class="mt-0.5 text-xs text-slate-400">{{ __('Who we call if something happens to you at work.') }}</p>
                    <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3">
                        <div>
                            <x-label for="emergency_contact_name" :value="__('Full name')" />
                            <x-input id="emergency_contact_name" class="mt-1 block w-full" wire:model="emergency_contact_name" />
                            <x-input-error for="emergency_contact_name" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="emergency_contact_phone" :value="__('Phone')" />
                            <x-input id="emergency_contact_phone" class="mt-1 block w-full" wire:model="emergency_contact_phone" />
                            <x-input-error for="emergency_contact_phone" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="emergency_contact_relation" :value="__('Relationship')" />
                            <x-input id="emergency_contact_relation" class="mt-1 block w-full" wire:model="emergency_contact_relation" placeholder="{{ __('Spouse, parent…') }}" />
                            <x-input-error for="emergency_contact_relation" class="mt-2" />
                        </div>
                    </div>
                </div>

                {{-- Statutory numbers ------------------------------------- --}}
                <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4">
                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Statutory numbers') }}</p>
                    <p class="mt-0.5 text-xs text-slate-400">
                        {{ __('These go on the PAYE and NSSA returns filed for you. If you have never had them, say so and HR will register you.') }}
                    </p>
                    <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <x-label for="tax_number" :value="__('ZIMRA tax number (TIN)')" />
                            <x-input id="tax_number" class="mt-1 block w-full" wire:model="tax_number" />
                            <x-input-error for="tax_number" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="social_security_number" :value="__('NSSA number')" />
                            <x-input id="social_security_number" class="mt-1 block w-full" wire:model="social_security_number" />
                            <x-input-error for="social_security_number" class="mt-2" />
                        </div>
                    </div>
                </div>

                {{-- How you get paid -------------------------------------- --}}
                <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4">
                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('How you get paid') }}</p>
                    <div class="mt-3 space-y-4">
                        <div>
                            <x-label for="pay_method" :value="__('Payment method')" />
                            <select id="pay_method" wire:model.live="pay_method" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                @foreach ($payMethods as $key => $label)
                                    <option value="{{ $key }}">{{ __($label) }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="pay_method" class="mt-2" />
                        </div>

                        @if ($pay_method === 'bank')
                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                <div>
                                    <x-label for="bank_name" :value="__('Bank')" />
                                    <x-input id="bank_name" class="mt-1 block w-full" wire:model="bank_name" />
                                    <x-input-error for="bank_name" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="bank_account_name" :value="__('Account name')" />
                                    <x-input id="bank_account_name" class="mt-1 block w-full" wire:model="bank_account_name" />
                                    <x-input-error for="bank_account_name" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="bank_account_number" :value="__('Account number')" />
                                    <x-input id="bank_account_number" class="mt-1 block w-full" wire:model="bank_account_number" />
                                    <x-input-error for="bank_account_number" class="mt-2" />
                                </div>
                            </div>
                        @elseif ($pay_method === 'ecocash')
                            <div>
                                <x-label for="mobile_money_number" :value="__('EcoCash number')" />
                                <x-input id="mobile_money_number" class="mt-1 block w-full" wire:model="mobile_money_number" placeholder="+263 77 000 0000" />
                                <p class="mt-1 text-xs text-slate-400">{{ __('Make sure the line is registered in your own name, or the transfer will bounce.') }}</p>
                                <x-input-error for="mobile_money_number" class="mt-2" />
                            </div>
                        @else
                            <p class="text-xs text-slate-400">{{ __('Nothing more needed, you collect from the office.') }}</p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 border-t border-slate-100 bg-slate-50/60 px-4 py-3 sm:px-6">
                <x-button wire:click="save" wire:loading.attr="disabled" wire:target="save" type="button">
                    <span wire:loading.remove wire:target="save">{{ __('Save my details') }}</span>
                    <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                </x-button>
            </div>
        </x-card>

        {{-- ID copies ---------------------------------------------------- --}}
        <x-card class="overflow-hidden">
            <div class="border-b border-slate-100 p-4 sm:p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Copy of your ID') }}</h2>
                <p class="text-xs text-slate-400">
                    {{ __('A photo or scan of your national ID or passport. Stored privately, visible only to you and HR.') }}
                </p>
            </div>

            <div class="space-y-4 p-4 sm:p-6">
                @if ($idDocuments->isNotEmpty())
                    <ul class="divide-y divide-slate-100 rounded-xl border border-slate-200">
                        @foreach ($idDocuments as $doc)
                            <li wire:key="id-doc-{{ $doc->id }}" class="flex items-center justify-between gap-3 px-4 py-3">
                                <div class="flex min-w-0 items-center gap-3">
                                    <x-icon name="paper-clip" class="h-4 w-4 shrink-0 text-slate-400" />
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-medium text-slate-900">{{ $doc->title }}</p>
                                        <p class="truncate text-xs text-slate-400">
                                            {{ $doc->original_name }} ·
                                            {{ __('uploaded :when', ['when' => $doc->created_at?->timezone(config('app.display_timezone'))->format('d M Y')]) }}
                                        </p>
                                    </div>
                                </div>
                                <button type="button" wire:click="downloadId({{ $doc->id }})"
                                    class="shrink-0 text-sm font-medium text-indigo-600 transition hover:text-indigo-800">{{ __('Download') }}</button>
                            </li>
                        @endforeach
                    </ul>
                @endif

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div class="sm:col-span-2">
                        <x-label for="id_file" :value="$idDocuments->isNotEmpty() ? __('Upload a replacement') : __('Upload your ID')" />
                        <input id="id_file" type="file" wire:model="id_file" accept=".pdf,.jpg,.jpeg,.png"
                            class="mt-1 block w-full rounded-xl border border-slate-300 text-sm text-slate-600 shadow-sm file:mr-3 file:rounded-l-xl file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-medium file:text-slate-700 hover:file:bg-slate-200" />
                        <p class="mt-1 text-xs text-slate-400">{{ __('PDF, JPG or PNG, up to 10 MB.') }}</p>
                        <x-input-error for="id_file" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="id_title" :value="__('Label (optional)')" />
                        <x-input id="id_title" class="mt-1 block w-full" wire:model="id_title" placeholder="{{ __('National ID') }}" />
                        <x-input-error for="id_title" class="mt-2" />
                    </div>
                </div>

                <div wire:loading wire:target="id_file" class="text-xs text-slate-400">{{ __('Uploading…') }}</div>

                <div class="flex justify-end">
                    <x-secondary-button wire:click="uploadId" wire:loading.attr="disabled" wire:target="uploadId,id_file" type="button">
                        <x-icon name="cloud-arrow-up" class="-ms-1 me-1.5 h-4 w-4" />
                        <span wire:loading.remove wire:target="uploadId">{{ __('Upload ID copy') }}</span>
                        <span wire:loading wire:target="uploadId">{{ __('Uploading…') }}</span>
                    </x-secondary-button>
                </div>
            </div>
        </x-card>
    </div>
</div>