<!-- duties_of_units_list.html -->
{% extends 'base.html' %}
{% load static %}
{% block content %}
{% include 'profile/header.html' %}
{% include 'profile/drawer.html' %}

<br />
<br />
<br />
<br />

<div class="container mt-5">
    <h2 class="text-center">تغییر رمز عبور</h2>
    <form method="post" class="mt-4">
        {% csrf_token %}
        <div class="form-group">
            <label for="id_old_password">رمز عبور قبلی :</label>
            <div class="input-group">
                <input type="password" class="form-control" id="id_old_password" name="old_password" required>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary toggle-password" type="button" data-target="id_old_password">
                        نمایش
                    </button>
                </div>
            </div>
        </div>

        <div class="form-group mt-3">
            <label for="id_new_password1">رمز عبور جدید :</label>
            <div class="input-group">
                <input type="password" class="form-control" id="id_new_password1" name="new_password1" required>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary toggle-password" type="button" data-target="id_new_password1">
                        نمایش
                    </button>
                </div>
            </div>
            <div id="password-hints" class="mt-2">
                <small class="text-muted">رمز عبور باید شرایط زیر را داشته باشد :</small>
                <ul>
                    <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>

        <div class="form-group mt-3">
            <label for="id_new_password2">تکرار رمز عبور جدید :</label>
            <div class="input-group">
                <input type="password" class="form-control" id="id_new_password2" name="new_password2" required>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary toggle-password" type="button" data-target="id_new_password2">
                        نمایش
                    </button>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary mt-4 w-100">تغییر رمز عبور</button>
    </form>
</div>
<script>
    // Toggle password visibility
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', () => {
            const targetId = button.getAttribute('data-target');
            const input = document.getElementById(targetId);
            if (input.type === 'password') {
                input.type = 'text';
                button.textContent = 'مخفی';
            } else {
                input.type = 'password';
                button.textContent = 'نمایش';
            }
        });
    });

    // Password strength check
    const passwordInput = document.getElementById('id_new_password1');
    const lengthCheck = document.getElementById('length-check');
    const uppercaseCheck = document.getElementById('uppercase-check');
    const lowercaseCheck = document.getElementById('lowercase-check');
    const numberCheck = document.getElementById('number-check');

    passwordInput.addEventListener('input', () => {
        const value = passwordInput.value;

        // Check each condition
        lengthCheck.classList.toggle('text-success', value.length >= 8);
        lengthCheck.classList.toggle('text-muted', value.length < 8);

        uppercaseCheck.classList.toggle('text-success', /[A-Z]/.test(value));
        uppercaseCheck.classList.toggle('text-muted', !/[A-Z]/.test(value));

        lowercaseCheck.classList.toggle('text-success', /[a-z]/.test(value));
        lowercaseCheck.classList.toggle('text-muted', !/[a-z]/.test(value));

        numberCheck.classList.toggle('text-success', /[0-9]/.test(value));
        numberCheck.classList.toggle('text-muted', !/[0-9]/.test(value));
    });
</script>

{% endblock %}
