{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="heading">Set New Password</div>
    <form class="form" onsubmit="event.preventDefault(); updatePassword();">
        <input type="hidden" id="email" value="{{ email }}">
        <input type="hidden" id="token" value="{{ token }}">
        <div class="input-field">
            <label for="passwd1">New Password</label>
            <input type="password" id="passwd1" minlength="8" required>
        </div>
        <div class="input-field">
            <label for="passwd2">Confirm New Password</label>
            <input type="password" id="passwd2" minlength="8" required>
        </div>
        <div id="passwordMatchMessage" style="color: red;"></div>
        <div class="btn-container">
            <button type="submit" class="btn" id="updatePasswordBtn" disabled>Update Password</button>
        </div>
    </form>
    <p id="result"></p>
</div>
<script>
    function validatePasswords() {
        const passwd1 = document.getElementById('passwd1').value;
        const passwd2 = document.getElementById('passwd2').value;
        const passwordMatchMessage = document.getElementById('passwordMatchMessage');
        const updatePasswordBtn = document.getElementById('updatePasswordBtn');

        if (passwd1.length >= 8 && passwd2.length >= 8 && passwd1 === passwd2) {
            passwordMatchMessage.innerText = '';
            updatePasswordBtn.disabled = false;
        } else {
            if (passwd1 !== passwd2) {
                passwordMatchMessage.innerText = 'Passwords do not match.';
            } else {
                passwordMatchMessage.innerText = '';
            }
            updatePasswordBtn.disabled = true;
        }
    }

    function updatePassword() {
        const email = document.getElementById('email').value;
        const token = document.getElementById('token').value;
        const passwd1 = document.getElementById('passwd1').value;
        const passwd2 = document.getElementById('passwd2').value;
        const result = document.getElementById('result');

        if (passwd1 !== passwd2) {
            result.innerText = 'Passwords do not match.';
            return;
        }
        
        fetch('/update_password', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: email,
                token: token,
                password: passwd1
            }),
        })
        .then(response => response.json())
        .then(data => {
            if (data.message === 'Password updated successfully!') {
                window.location.href = '/success';
            } else {
                result.innerText = data.message;
            }
        })
        .catch((error) => {
            result.innerText = 'An error occurred. Please try again.';
            console.error('Error:', error);
        });
    }

    document.getElementById('passwd1').addEventListener('input', validatePasswords);
    document.getElementById('passwd2').addEventListener('input', validatePasswords);
</script>
{% endblock %}