<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>

    <title>Halaman Forget Password</title>
</head>

<body class="bg-gray-100">
   
    <div class="container mx-auto flex justify-center items-center h-screen">
        <!-- Hero Section Start -->
        <div class="p-8 rounded w-96">
            <h1 class="text-3xl font-body font-semibold mb-4">Lupa Password</h1>
            <p class="text-gray-600 mb-4">
                Masukkan Email anda untuk mengirimkan link reset email
            </p>
            <form id="registrationForm">
                <div class="mb-4">
                    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                    <input type="email" id="email" name="email"
                        class="mt-2 block w-full py-2 px-3 rounded-md outline-1 border-2 border-gray-300 focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50"
                        placeholder="Masukkan Email" required />
                </div>
                <span id="successBadge" class="hidden ml-2 bg-green-500 text-white px-2 py-1 my-2 rounded-md">Berhasil</span>
                <button id="submitButton"
                    class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 my-6">
                    <span id="buttonText">Send Email</span>
                    <span id="spinner"
                        class="hidden ml-2 border-t-2 border-b-2 border-blue-600 rounded-full w-4 h-4"></span>
                </button>
                
            </form>
            <div class="text-sm flex space-x-2">
                <p>Sudah Daftar?</p>
                <a href="/to/to-login" class="font-medium text-blue-600 hover:text-blue-500">Masuk</a>
            </div>
        </div>
    </div>

    <footer class="bg-white text-white p-4">
        <div class="container mx-auto flex items-center justify-between">
            <!-- Logo -->
            <div class="logo flex space-x-3">
                <img src="/img/upnsehat-kecil.png" alt="Logo" class="h-8" />
                <img src="/img/upn-kecil.png" alt="Logo" class="h-8" />
            </div>
            <!-- Hak Cipta -->
            <p class="text-sm text-gray-900">
                &copy; 2024, Studi Informatika, Fakultas Ilmu Komputer. Hak Cipta
                Dilindungi
            </p>
        </div>
    </footer>

    <!-- script hamburger -->
    <script>
        const hamburger = document.querySelector("#hamburger");
        const navMenu = document.querySelector("#nav-menu");

        hamburger.addEventListener("click", function () {
            hamburger.classList.toggle("hamburger-active");
            navMenu.classList.toggle("hidden");
        });

    </script>
    <!-- script kirim email -->
    <script>
        const form = document.getElementById('registrationForm');
        const submitButton = document.getElementById('submitButton');
        const buttonText = document.getElementById('buttonText');
        const spinner = document.getElementById('spinner');
        const successBadge = document.getElementById('successBadge');

        form.addEventListener('submit', async (event) => {
            event.preventDefault();

            // Disable the submit button
            submitButton.disabled = true;

            // Show spinner and hide success badge
            buttonText.textContent = 'Sending...';
            spinner.classList.remove('hidden');
            successBadge.classList.add('hidden');

            const formData = new FormData(form);
            const email = formData.get('email');

            try {
                // Make a POST request to the backend to trigger the password reset process
                const response = await fetch(`http://localhost:3000/forgetPassword?email=${encodeURIComponent(email)}`);
                const data = await response.json();

                if (response.ok) {
                    // Show success badge
                    successBadge.classList.remove('hidden');
                    alert('Berhasil');
                } else {
                    console.error('Error:', data.message);
                    // Handle error scenario, display error message to the user
                    alert('Error: ' + data.message);
                }
            } catch (error) {
                console.error('Error:', error.message);
                // Handle network error or other unexpected errors
                alert('An error occurred. Please try again.');
            } finally {
                // Enable the submit button and hide spinner
                submitButton.disabled = false;
                buttonText.textContent = 'Send Email';
                spinner.classList.add('hidden');
            }
        });
    </script>

</body>

</html>