{% extends "base.html" %}

{% block title %}Change Password{% endblock title %}

{% block content %}
<div class="dashboard-box">
    <div class="dashboard-title"><i class="fa-solid fa-lock"></i> Change Password</div>
<!-- 
    {% if messages %}
        {% for message in messages %}
            <div style="color: {% if message.tags == 'error' %}red{% else %}green{% endif %}; margin-bottom: 15px;">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %} -->

    <form method="post" action="{% url 'change-password' %}">
        {% csrf_token %}
        <table>
            <tr>
                <td><i class="fa-solid fa-key"></i> Current Password</td>
                <td style="position: relative;">
                    <input type="password" name="current_password" id="current_password" required>
                    <i class="fa-solid fa-eye toggle-password" toggle="#current_password" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer;"></i>
                </td>
            </tr>
            <tr>
                <td><i class="fa-solid fa-key"></i> New Password</td>
                <td style="position: relative;">
                    <input type="password" name="new_password" id="new_password" required>
                    <i class="fa-solid fa-eye toggle-password" toggle="#new_password" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer;"></i>
                </td>
            </tr>
            <tr>
                <td><i class="fa-solid fa-key"></i> Confirm Password</td>
                <td style="position: relative;">
                    <input type="password" name="confirm_password" id="confirm_password" required>
                    <i class="fa-solid fa-eye toggle-password" toggle="#confirm_password" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer;"></i>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:right;">
                    <button type="submit" class="logout-btn" style="background:#007bff;">Update Password</button>
                </td>
            </tr>
        </table>
    </form>
</div>
<script>
    // Toggle password visibility
    const toggleIcons = document.querySelectorAll('.toggle-password');
    toggleIcons.forEach(icon => {
        icon.addEventListener('click', () => {
            const input = document.querySelector(icon.getAttribute('toggle'));
            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');
            }
        });
    });

    // ✅ Strong Password Validation
    document.querySelector("form").addEventListener("submit", function (e) {

        const newPassword = document.getElementById("new_password").value;
        const confirmPassword = document.getElementById("confirm_password").value;

        // Strong password regex
        const strongPasswordPattern =
            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

        if (!strongPasswordPattern.test(newPassword)) {
            e.preventDefault();
            alert("Password must be STRONG:\n\n• Minimum 8 characters\n• At least 1 uppercase\n• At least 1 lowercase\n• At least 1 number\n• At least 1 special character");
            return;
        }

        if (newPassword !== confirmPassword) {
            e.preventDefault();
            alert("New password and confirm password do not match!");
        }
    });
</script>

{% endblock %}