{% extends "base.html" %}

{% block title %}إعادة تعيين كلمة السر{% endblock %}

{% block content %}
<div class="auth-container">
    <h2>إعادة تعيين كلمة السر</h2>
    <form id="resetPasswordForm" method="POST" action="{{ url_for('reset_password') }}">
        <input type="hidden" name="email" value="{{ email }}">
        <div class="form-group">
            <label for="security_answer">إجابة سؤال الأمان</label>
            <input type="text" id="security_answer" name="security_answer" required>
            <span id="security-answer-message"></span>
        </div>
        <div class="form-group">
            <label for="new_password">كلمة المرور الجديدة</label>
            <input type="password" id="new_password" name="new_password" required>
        </div>
        <div class="form-group">
            <label for="confirm_password">تأكيد كلمة المرور</label>
            <input type="password" id="confirm_password" name="confirm_password" required>
        </div>
        <button type="submit" class="submit-btn" id="resetPasswordBtn" disabled>إعادة تعيين كلمة السر</button>
    </form>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    $('#security_answer').on('input', function() {
        const email = '{{ email }}';
        const security_answer = $(this).val();

        $.ajax({
            url: '/validate_security_answer',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ email: email, security_answer: security_answer }),
            success: function(data) {
                const messageElement = $('#security-answer-message');
                if (data.valid) {
                    messageElement.text('صحيح').css('color', 'green');
                    $('#resetPasswordBtn').prop('disabled', false);
                } else {
                    messageElement.text('خطأ').css('color', 'red');
                    $('#resetPasswordBtn').prop('disabled', true);
                }
            },
            error: function() {
                $('#security-answer-message').text('حدث خطأ أثناء التحقق من إجابة سؤال الأمان').css('color', 'red');
            }
        });
    });

    $('#resetPasswordForm').on('submit', function(e) {
        const new_password = $('#new_password').val();
        const confirm_password = $('#confirm_password').val();

        if (new_password !== confirm_password) {
            e.preventDefault();
            alert('كلمات المرور غير متطابقة');
        }
    });
});
</script>
{% endblock %}