{% extends 'base.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="d-flex flex-column flex-root">
    <div class="login login-3 login-signin-on d-flex flex-row-fluid" id="kt_login">
        <div class="d-flex flex-center bgi-size-cover bgi-no-repeat flex-row-fluid" style="background-image: url('{% static "media/bg/bg-1.jpg" %}');">
            <div class="login-form text-center text-white p-7 position-relative overflow-hidden">
                <h1>تغییر رمز عبور</h1>
                <h2 class="mt-10 mb-10">کاربر : {{ user.first_name }} {{ user.last_name }}</h2>
                
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="form-group mt-3 ">
                        <label class="text-white" for="id_new_password">رمز عبور جدید :</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="id_new_password" name="new_password" required>
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary toggle-password text-white" type="button" data-target="id_new_password">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mt-3 text-white">
                        <label class="text-white" for="id_confirm_password">تکرار رمز عبور جدید :</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="id_confirm_password" name="confirm_password" required>
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary toggle-password text-white" type="button" data-target="id_confirm_password">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="password-hints" class="mt-2 text-left">
                        <small class="text-white">رمز عبور باید شرایط زیر را داشته باشد :</small>
                        <ul class="list-unstyled text-white mt-2">
                            <li class="text-muted" id="length-check">حداقل ۸ کاراکتر</li>
                            <li class="text-muted" id="uppercase-check">حداقل ۱ حرف بزرگ (لاتین)</li>
                            <li class="text-muted" id="lowercase-check">حداقل ۱ حرف کوچک (لاتین)</li>
                            <li class="text-muted" id="number-check">حداقل ۱ عدد</li>
                        </ul>
                    </div>
                    
                    <div id="password-errors" class="text-danger mt-2" style="display: none;">
                        <p>لطفاً تمامی شرایط رمز عبور را رعایت کنید.</p>
                    </div>
                    

                    <button type="submit" id="submit-btn" class="btn btn-pill btn-outline-white font-weight-bold opacity-90 px-15 py-3 w-100 mt-4" disabled>تغییر رمز عبور</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
  document.querySelectorAll('.toggle-password').forEach(button => {
    button.addEventListener('click', () => {
        const targetId = button.getAttribute('data-target');
        const input = document.getElementById(targetId);
        const icon = button.querySelector('i'); // آیکون در داخل دکمه را پیدا می‌کنیم
        
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');  // تغییر آیکون به چشم بسته
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');  // تغییر آیکون به چشم باز
        }
    });
});



    // Password strength check
    const passwordInput = document.getElementById('id_new_password');
    const confirmPasswordInput = document.getElementById('id_confirm_password');
    const lengthCheck = document.getElementById('length-check');
    const uppercaseCheck = document.getElementById('uppercase-check');
    const lowercaseCheck = document.getElementById('lowercase-check');
    const numberCheck = document.getElementById('number-check');
    const errorMessage = document.getElementById('password-errors');
    const submitBtn = document.getElementById('submit-btn');

    function validatePassword() {
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;

        let isValid = true;

        // Length check (at least 8 characters)
        if (password.length >= 8) {
            lengthCheck.classList.remove('text-muted');
            lengthCheck.classList.add('text-success');
        } else {
            lengthCheck.classList.remove('text-success');
            lengthCheck.classList.add('text-muted');
            isValid = false;
        }

        // Uppercase check (at least 1 uppercase letter)
        if (/[A-Z]/.test(password)) {
            uppercaseCheck.classList.remove('text-muted');
            uppercaseCheck.classList.add('text-success');
        } else {
            uppercaseCheck.classList.remove('text-success');
            uppercaseCheck.classList.add('text-muted');
            isValid = false;
        }

        // Lowercase check (at least 1 lowercase letter)
        if (/[a-z]/.test(password)) {
            lowercaseCheck.classList.remove('text-muted');
            lowercaseCheck.classList.add('text-success');
        } else {
            lowercaseCheck.classList.remove('text-success');
            lowercaseCheck.classList.add('text-muted');
            isValid = false;
        }

        // Number check (at least 1 number)
        if (/[0-9]/.test(password)) {
            numberCheck.classList.remove('text-muted');
            numberCheck.classList.add('text-success');
        } else {
            numberCheck.classList.remove('text-success');
            numberCheck.classList.add('text-muted');
            isValid = false;
        }

        // Check if passwords match
        if (password !== confirmPassword) {
            isValid = false;
            errorMessage.style.display = 'block';
        } else {
            errorMessage.style.display = 'none';
        }

        // Show or hide error message and enable/disable submit button
        if (isValid) {
            submitBtn.disabled = false;
            errorMessage.style.display = 'none';
        } else {
            submitBtn.disabled = true;
            if (password && confirmPassword) {
                errorMessage.style.display = 'block';
            }
        }
    }

    // Add event listeners
    passwordInput.addEventListener('input', validatePassword);
    confirmPasswordInput.addEventListener('input', validatePassword);
</script>

{% endblock %}