{{-- Frontend customer profile — preserves profilePage() bindings; admin uses profile.details --}}
@php
$lastLogin = $user->last_login_at?->diffForHumans();
$memberSince = $user->created_at?->format('M Y');
@endphp

<div
    class="w-full min-w-0"
    x-data="profilePage()"
    data-initial-avatar="{{ $user->avatar }}"
    data-avatar-upload-url="{{ route($user->role.'.profile.avatar.upload') }}"
    data-avatar-remove-url="{{ route($user->role.'.profile.avatar.remove') }}">
    <form id="avatarUploadForm" class="sr-only" aria-hidden="true" novalidate>
        @csrf
        <input
            x-ref="avatarInput"
            type="file"
            name="avatar"
            accept="image/jpeg,image/png,image/webp"
            tabindex="-1"
            x-bind:disabled="avatarUploading"
            @change="onAvatarSelected($event)" />
    </form>

    <form
        action="{{ route($user->role.'.profile.update') }}"
        method="POST"
        id="profileForm"
        class="space-y-5 sm:space-y-6"
        novalidate
        @submit.prevent="submitProfile">
        @csrf

        {{-- Hero identity band --}}
        <section
            class="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card transition-shadow duration-300 hover:shadow-hover dark:border-border/60 dark:shadow-soft"
            aria-labelledby="profile-hero-heading">
            <div class="relative bg-gradient-to-br from-slate-900 via-violet-950 to-fuchsia-950 px-5 py-8 sm:px-8 sm:py-10">
                <div
                    class="pointer-events-none absolute -right-16 -top-16 h-48 w-48 rounded-full bg-violet-500/20 blur-3xl"
                    aria-hidden="true"></div>
                <div
                    class="pointer-events-none absolute -bottom-20 left-1/4 h-40 w-40 rounded-full bg-fuchsia-500/15 blur-3xl"
                    aria-hidden="true"></div>

                <div class="relative flex flex-col gap-6 sm:flex-row sm:items-center sm:gap-8">
                    {{-- Avatar: upload + delete icons on hover --}}
                    <div
                        class="relative shrink-0"
                        :class="avatarUploading ? 'opacity-90' : ''">
                        <div
                            x-show="avatarUploading"
                            x-cloak
                            class="relative size-32"
                            aria-live="polite"
                            aria-busy="true">
                            <div class="animate-skeleton size-full rounded-full bg-white/10 ring-2 ring-white/30"></div>
                            <div class="absolute inset-0 flex flex-col items-center justify-center rounded-full bg-slate-950/70 backdrop-blur-sm ring-2 ring-white/30">
                                <span class="text-xl font-bold text-white" x-text="`${uploadProgress}%`"></span>
                                <span class="mt-0.5 text-xs font-medium text-violet-200/90">{{ __('buttons.uploading') }}</span>
                            </div>
                        </div>

                        <div
                            x-show="!avatarUploading"
                            x-cloak
                            class="relative size-32">
                            <div class="group/avatar relative size-full overflow-hidden rounded-full ring-2 ring-white/30 [&_.avatar-image]:ring-0 [&_.avatar-initials]:ring-0">
                                <x-utility.avatar :src="$user->avatar" :name="$user->full_name" size="3xl" />
                                <div
                                    class="pointer-events-none absolute inset-0 z-[1] flex items-center justify-center gap-2.5 rounded-full bg-slate-950/50 opacity-0 transition duration-200 group-hover/avatar:pointer-events-auto group-hover/avatar:opacity-100 max-lg:pointer-events-auto max-lg:opacity-100"
                                    x-bind:class="avatarRemoving ? 'opacity-100 pointer-events-auto' : ''">
                                    <button
                                        type="button"
                                        class="grid size-9 place-items-center rounded-full bg-white/90 text-black shadow-sm transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/60 disabled:pointer-events-none disabled:opacity-50"
                                        x-bind:disabled="avatarUploading || avatarRemoving"
                                        x-bind:aria-label="hasAvatar ? '{{ __('buttons.change') }} profile photo' : '{{ __('buttons.upload') }} profile photo'"
                                        @click.stop="$refs.avatarInput.click()">
                                        <x-heroicon-o-arrow-up-tray class="size-5 shrink-0" aria-hidden="true" />
                                    </button>
                                    <button
                                        type="button"
                                        x-show="hasAvatar"
                                        x-cloak
                                        class="grid size-9 place-items-center rounded-full bg-white/90 text-rose-600 shadow-sm transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300/60 disabled:pointer-events-none disabled:opacity-50"
                                        x-bind:disabled="avatarUploading || avatarRemoving"
                                        aria-label="{{ __('buttons.remove') }} profile photo"
                                        @click.stop="$store.confirmDialog.show({
                                            title: '{{ __('pages/profile.remove_photo_title') }}',
                                            description: '{{ __('pages/profile.remove_photo_message') }}',
                                            confirmText: '{{ __('buttons.remove') }}',
                                            cancelText: '{{ __('buttons.cancel') }}',
                                            heroicon: 'heroicon-o-trash',
                                            iconWrapperClass: 'flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-rose-100 dark:bg-rose-900/30',
                                            heroiconClass: 'h-7 w-7 shrink-0 text-rose-600 dark:text-rose-400',
                                            confirmButtonClass: 'inline-flex cursor-pointer select-none items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-60 bg-rose-600 text-white shadow-sm hover:bg-rose-700 active:bg-rose-800',
                                            onConfirm: () => removeAvatar(),
                                        })">
                                        <x-heroicon-o-trash class="size-5 shrink-0" aria-hidden="true" />
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Identity copy --}}
                    <div class="min-w-0 flex-1 text-center sm:text-left">
                        <p class="text-xs font-medium uppercase tracking-wider text-violet-200/80">
                            {{ __('pages/profile.my_profile') }}
                        </p>
                        <h2
                            id="profile-hero-heading"
                            class="profile-name mt-1 text-2xl font-bold tracking-tight text-white sm:text-3xl">
                            {{ $user->full_name }}
                        </h2>
                        <p class="profile-email mt-1.5 truncate text-sm text-violet-200/90 sm:text-base">
                            {{ $user->email }}
                        </p>

                        <dl class="mt-5 flex flex-wrap justify-center gap-2 sm:justify-start">
                            @if ($memberSince)
                            <div class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-3 py-1.5 text-xs font-medium text-violet-100 backdrop-blur-sm">
                                <x-heroicon-o-calendar-days class="h-3.5 w-3.5 shrink-0 text-violet-300" />
                                <dt class="sr-only">{{ __('pages/profile.member_since') }}</dt>
                                <dd>{{ __('pages/profile.member_since') }} {{ $memberSince }}</dd>
                            </div>
                            @endif
                            @if ($lastLogin)
                            <div class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-3 py-1.5 text-xs font-medium text-violet-100 backdrop-blur-sm">
                                <x-heroicon-o-clock class="h-3.5 w-3.5 shrink-0 text-violet-300" />
                                <dt class="sr-only">{{ __('pages/profile.last_login') }}</dt>
                                <dd>{{ __('pages/profile.last_login') }} · {{ $lastLogin }}</dd>
                            </div>
                            @endif
                        </dl>
                    </div>
                </div>
            </div>

            <div class="flex gap-3 border-t border-border/80 bg-muted/30 px-5 py-3.5 text-xs leading-relaxed text-muted-foreground dark:bg-muted/20 sm:px-6">
                <x-heroicon-o-information-circle class="mt-0.5 h-4 w-4 shrink-0 text-brand dark:text-primary-400" />
                <p>{{ __('pages/account-setting.profile.profile_photo_info') }}</p>
            </div>
        </section>

        {{-- Account details --}}
        <div class="grid grid-cols-1 gap-5 sm:gap-6 xl:grid-cols-12">
            <section
                class="xl:col-span-12"
                aria-labelledby="contact-details-heading">
                <div class="overflow-hidden rounded-2xl border border-border/80 bg-card shadow-card dark:border-border/60 dark:shadow-soft">
                    <div class="border-b border-border/80 px-5 py-5 sm:px-6">
                        <h3 id="contact-details-heading" class="text-base font-semibold text-foreground">
                            {{ __('pages/account-setting.profile.title') }}
                        </h3>
                        <p class="mt-1 text-sm leading-relaxed text-muted-foreground">
                            {{ __('pages/account-setting.profile.description') }}
                        </p>
                    </div>

                    <div class="space-y-6 p-5 sm:p-6">
                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                            <div class="space-y-2">
                                <x-forms.label for="first_name" required>{{ __('form.label.first_name') }}</x-forms.label>
                                <x-forms.input
                                    type="text"
                                    name="first_name"
                                    id="first_name"
                                    value="{{ $user->first_name }}"
                                    placeholder="{{ __('placeholders.first_name.example') }}"
                                    icon="heroicon-o-user"
                                    required
                                    x-bind:disabled="submitting" />
                            </div>
                            <div class="space-y-2">
                                <x-forms.label for="last_name" required>{{ __('form.label.last_name') }}</x-forms.label>
                                <x-forms.input
                                    type="text"
                                    name="last_name"
                                    id="last_name"
                                    value="{{ $user->last_name }}"
                                    placeholder="{{ __('placeholders.last_name.example') }}"
                                    icon="heroicon-o-user"
                                    required
                                    x-bind:disabled="submitting" />
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                            <div class="space-y-2">
                                <x-forms.label for="email" required>{{ __('form.label.email') }}</x-forms.label>
                                <x-forms.input
                                    type="email"
                                    name="email"
                                    id="email"
                                    value="{{ $user->email }}"
                                    placeholder="{{ __('placeholders.email.example') }}"
                                    icon="heroicon-o-envelope"
                                    required
                                    x-bind:disabled="submitting" />
                            </div>
                            <div class="space-y-2">
                                <x-forms.label for="phone">{{ __('form.label.phone') }}</x-forms.label>
                                <x-forms.input
                                    name="phone"
                                    type="tel"
                                    id="phone"
                                    placeholder="{{ __('placeholders.phone.example') }}"
                                    value="{{ $user->phone ? format_phone($user->phone) : '' }}"
                                    icon="heroicon-o-phone"
                                    x-bind:disabled="submitting"
                                    x-mask="(999) 999 9999" />
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-5">
                            <div class="space-y-2">
                                <x-forms.label for="bio">{{ __('form.label.bio') }}</x-forms.label>
                                <x-forms.textarea
                                    name="bio"
                                    id="bio"
                                    value="{{ $user->bio }}"
                                    placeholder="{{ __('pages/profile.bio_description') }}"
                                    :rows="8"
                                    x-bind:disabled="submitting" />
                            </div>
                        </div>
                    </div>

                    <div class="p-6 sm:p-7 flex justify-end">
                        <x-buttons.primary
                            type="submit"
                            size="lg"
                            class="w-full shrink-0 sm:w-auto"
                            x-bind:disabled="submitting">
                            <x-heroicon-o-arrow-path class="h-4 w-4 animate-spin" x-show="submitting" x-cloak />
                            <span x-text="submitting ? '{{ __('buttons.saving') }}' : '{{ __('buttons.save_changes') }}'"></span>
                        </x-buttons.primary>
                    </div>
                </div>
            </section>
        </div>
    </form>
</div>

@once
@push('modals')
<x-alert-dialog />
@endpush
@push('before-app-js')
{!! JsValidator::formRequest('App\Http\Requests\Profile\ProfileRequest', '#profileForm') !!}
{!! JsValidator::formRequest('App\Http\Requests\Profile\UploadProfileImage', '#avatarUploadForm') !!}
@vite(['resources/js/user/profile.js'])
@endpush
@endonce