@php $inputClass = 'w-full px-4 py-2.5 rounded-xl border border-stone-200 bg-stone-50 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent transition'; @endphp

<form id="send-verification" method="post" action="{{ route('verification.send') }}">
    @csrf
</form>

<form method="post" action="{{ route('profile.update') }}" class="space-y-4">
    @csrf
    @method('patch')

    {{-- Success alert --}}
    @if(session('status') === 'profile-updated')
    <div class="flex items-center gap-2 p-3 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl text-sm animate-fade-in">
        <i class="fas fa-check-circle text-emerald-500"></i>
        <span>Profil berhasil diperbarui!</span>
    </div>
    @endif

    <div>
        <label for="name" class="block text-xs font-semibold text-stone-600 mb-1.5">
            Nama Lengkap <span class="text-rose-500">*</span>
        </label>
        <div class="relative">
            <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-stone-400 text-sm">
                <i class="fas fa-user"></i>
            </span>
            <input id="name" name="name" type="text"
                   value="{{ old('name', $user->name) }}"
                   class="{{ $inputClass }} pl-10"
                   required autofocus autocomplete="name"
                   placeholder="Masukkan nama lengkap">
        </div>
        @error('name')
        <p class="mt-1 text-xs text-rose-500 flex items-center gap-1"><i class="fas fa-exclamation-circle"></i> {{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="email" class="block text-xs font-semibold text-stone-600 mb-1.5">
            Alamat Email <span class="text-rose-500">*</span>
        </label>
        <div class="relative">
            <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-stone-400 text-sm">
                <i class="fas fa-envelope"></i>
            </span>
            <input id="email" name="email" type="email"
                   value="{{ old('email', $user->email) }}"
                   class="{{ $inputClass }} pl-10"
                   required autocomplete="username"
                   placeholder="Masukkan email">
        </div>
        @error('email')
        <p class="mt-1 text-xs text-rose-500 flex items-center gap-1"><i class="fas fa-exclamation-circle"></i> {{ $message }}</p>
        @enderror

        @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
        <div class="mt-2 flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-xl">
            <i class="fas fa-info-circle text-amber-500 mt-0.5 flex-shrink-0"></i>
            <div class="text-xs text-amber-700">
                Email belum diverifikasi.
                <button form="send-verification"
                        class="underline font-semibold hover:no-underline ml-1">
                    Kirim ulang email verifikasi
                </button>
                @if (session('status') === 'verification-link-sent')
                <p class="mt-1 text-emerald-600 font-medium">Link verifikasi telah dikirim ke email kamu.</p>
                @endif
            </div>
        </div>
        @endif
    </div>

    <div class="pt-1">
        <button type="submit"
                class="inline-flex items-center gap-2 px-5 py-2.5 btn-primary text-sm font-bold rounded-xl shadow-sm transition">
            <i class="fas fa-save"></i> Simpan Perubahan
        </button>
    </div>
</form>
