<x-guest-layout>
    <div class="mb-6 text-center">
        <h2 class="text-2xl font-bold text-gray-800">Lupa Password?</h2>
        <p class="text-sm text-gray-600 mt-2">
            Jangan khawatir! Masukkan email Anda dan kami akan mengirimkan link untuk mengatur ulang password Anda.
        </p>
    </div>

    <x-auth-session-status class="mb-4" :status="session('status')" />

    <form method="POST" action="{{ route('password.email') }}" id="forgotPasswordForm">
        @csrf

        <div>
            <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
            <input id="email" class="block mt-1 w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-[#7ebc12] focus:border-[#7ebc12]" 
                   type="email" name="email" :value="old('email')" required autofocus />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <div class="flex flex-col gap-3 mt-6">
            <button type="submit" id="submitBtn" class="w-full bg-[#7ebc12] hover:bg-[#6aa30f] text-white font-semibold py-2 rounded-lg shadow transition flex items-center justify-center gap-2">
                <span id="btnText">Kirim Link Reset</span>
                <i id="btnSpinner" class="fas fa-spinner fa-spin hidden"></i>
            </button>
            
            <a href="{{ route('login') }}" class="text-center text-sm text-gray-500 hover:text-gray-700 font-medium">
                Kembali ke Login
            </a>
        </div>
    </form>

    <script>
        document.getElementById('forgotPasswordForm').addEventListener('submit', function() {
            const btn = document.getElementById('submitBtn');
            document.getElementById('btnText').innerText = "Mengirim...";
            document.getElementById('btnSpinner').classList.remove('hidden');
            btn.disabled = true;
        });
    </script>
</x-guest-layout>