<section class="space-y-4">
    <header>
        <p class="mt-1 text-sm text-gray-600">
            Perbarui nama dan alamat email akun kamu.
        </p>
    </header>

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

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

        <!-- Name -->
        <div>
            <label for="name" class="block text-sm font-medium text-gray-700">
                Nama
            </label>
            <input id="name" name="name" type="text"
                value="{{ old('name', $user->name) }}" required autofocus
                class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
                autocomplete="name">
            <x-input-error class="mt-1 text-sm" :messages="$errors->get('name')" />
        </div>

        <!-- Email -->
        <div>
            <label for="email" class="block text-sm font-medium text-gray-700">
                Email
            </label>
            <input id="email" name="email" type="email"
                value="{{ old('email', $user->email) }}" required
                class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
                autocomplete="username">
            <x-input-error class="mt-1 text-sm" :messages="$errors->get('email')" />

            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                <div class="mt-2 text-sm text-yellow-700 bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                    <p>Email kamu belum diverifikasi.</p>

                    <button form="send-verification"
                        class="mt-1 underline text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                        Kirim ulang email verifikasi
                    </button>

                    @if (session('status') === 'verification-link-sent')
                        <p class="mt-2 text-sm text-green-600 font-medium">
                            Link verifikasi baru sudah dikirim ke email kamu.
                        </p>
                    @endif
                </div>
            @endif
        </div>

        <!-- WhatsApp -->
        <div>
            <label for="no_whatsapp" class="block text-sm font-medium text-gray-700">
                No WhatsApp
            </label>
            <input id="no_whatsapp" name="no_whatsapp" type="number"
                value="{{ old('no_whatsapp', $user->no_whatsapp) }}" required autofocus
                class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
                autocomplete="no_whatsapp">
            <x-input-error class="mt-1 text-sm" :messages="$errors->get('no_whatsapp')" />
        </div>

        <!-- Save -->
        <div class="flex items-center gap-4 pt-2">
            <button type="submit"
                class="px-5 py-2.5 rounded-lg bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition">
                Simpan Perubahan
            </button>

            @if (session('status') === 'profile-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 2000)"
                    class="text-sm text-green-600"
                >
                    Profil berhasil diperbarui ✔
                </p>
            @endif
        </div>
    </form>
</section>