{% extends "auth/base.html" %}
{% load static %}

{% block title %}Change Password - {{ block.super }}{% endblock %}

{% block content %}
<div class="change-container">
    <div class="change-card">
        <div class="logo-container">
            <img src="{% static 'images/logo.png' %}" alt="Logo" class="logo">
        </div>
        
        <div class="text-center mb-4">
            <i class="fas fa-key fa-3x text-warning mb-3"></i>
            <h1>Change Password</h1>
            <p class="text-muted">Update your account password</p>
        </div>
                
        <form method="post" id="passwordChangeForm">
            {% csrf_token %}
            
            {% if form.non_field_errors %}
                <div class="error-message">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    {{ form.non_field_errors.0 }}
                </div>
            {% endif %}
                    
            <div class="form-floating mb-3">
                <input type="password" 
                       class="form-control {% if form.old_password.errors %}is-invalid{% endif %}" 
                       id="{{ form.old_password.id_for_label }}"
                       name="{{ form.old_password.name }}"
                       placeholder="Enter your current password"
                       required>
                <label for="{{ form.old_password.id_for_label }}">
                    <i class="fas fa-lock me-2"></i>Current Password
                </label>
                <button class="password-toggle" type="button" id="toggleOldPassword">
                    <i class="fas fa-eye"></i>
                </button>
                {% if form.old_password.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.old_password.errors.0 }}
                    </div>
                {% endif %}
            </div>
                    
            <div class="form-floating mb-3">
                <input type="password" 
                       class="form-control {% if form.new_password1.errors %}is-invalid{% endif %}" 
                       id="{{ form.new_password1.id_for_label }}"
                       name="{{ form.new_password1.name }}"
                       placeholder="Enter your new password"
                       required>
                <label for="{{ form.new_password1.id_for_label }}">
                    <i class="fas fa-key me-2"></i>New Password
                </label>
                <button class="password-toggle" type="button" id="toggleNewPassword1">
                    <i class="fas fa-eye"></i>
                </button>
                <div class="form-text">
                    <i class="fas fa-shield-alt me-1"></i>
                    Password must be at least 8 characters with uppercase, lowercase, number, and special character.
                </div>
                {% if form.new_password1.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.new_password1.errors.0 }}
                    </div>
                {% endif %}
                <div id="passwordStrength" class="mt-2"></div>
            </div>
                    
            <div class="form-floating mb-4">
                <input type="password" 
                       class="form-control {% if form.new_password2.errors %}is-invalid{% endif %}" 
                       id="{{ form.new_password2.id_for_label }}"
                       name="{{ form.new_password2.name }}"
                       placeholder="Confirm your new password"
                       required>
                <label for="{{ form.new_password2.id_for_label }}">
                    <i class="fas fa-key me-2"></i>Confirm New Password
                </label>
                <button class="password-toggle" type="button" id="toggleNewPassword2">
                    <i class="fas fa-eye"></i>
                </button>
                {% if form.new_password2.errors %}
                    <div class="invalid-feedback d-block">
                        {{ form.new_password2.errors.0 }}
                    </div>
                {% endif %}
                <div id="passwordMatch" class="mt-1"></div>
            </div>
                    
            <div class="d-grid mb-3">
                <button type="submit" class="btn-verification" id="changePasswordBtn">
                    <span class="btn-text">
                        <i class="fas fa-key me-2"></i>Change Password
                    </span>
                    <span class="btn-loading d-none">
                        <span class="loading me-2"></span>Changing password...
                    </span>
                </button>
            </div>
                </form>
                
                <hr class="my-4">
                
            <div class="text-center">
                <a href="{% url 'core:dashboard' %}" class="login-link">
                    <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
                </a>
            </div>
                
            <!-- Security Tips -->
            <div class="security-badge">
                <h6 class="mb-3">
                    <i class="fas fa-lightbulb me-2"></i>Security Tips
                </h6>
                <ul class="list-unstyled small">
                    <li class="mb-1">
                        <i class="fas fa-check text-success me-2"></i>
                        Use a unique password you don't use elsewhere
                    </li>
                    <li class="mb-1">
                        <i class="fas fa-check text-success me-2"></i>
                        Include uppercase, lowercase, numbers, and symbols
                    </li>
                    <li class="mb-1">
                        <i class="fas fa-check text-success me-2"></i>
                        Make it at least 8 characters long
                    </li>
                    <li class="mb-0">
                        <i class="fas fa-check text-success me-2"></i>
                        Avoid common words and personal information
                    </li>
                </ul>
            </div>
            </div>
        </div>
        
        <!-- Additional Security Info -->
        <div class="text-center mt-4">
            <small class="text-muted">
                <i class="fas fa-shield-alt me-1"></i>
                Your password is encrypted and secure. We never store it in plain text.
            </small>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const passwordChangeForm = document.getElementById('passwordChangeForm');
    const changePasswordBtn = document.getElementById('changePasswordBtn');
    const oldPasswordField = document.getElementById('{{ form.old_password.id_for_label }}');
    const newPassword1Field = document.getElementById('{{ form.new_password1.id_for_label }}');
    const newPassword2Field = document.getElementById('{{ form.new_password2.id_for_label }}');
    
    // Toggle password visibility
    document.getElementById('toggleOldPassword').addEventListener('click', function() {
        togglePasswordVisibility(oldPasswordField, this);
    });
    
    document.getElementById('toggleNewPassword1').addEventListener('click', function() {
        togglePasswordVisibility(newPassword1Field, this);
    });
    
    document.getElementById('toggleNewPassword2').addEventListener('click', function() {
        togglePasswordVisibility(newPassword2Field, this);
    });
    
    function togglePasswordVisibility(field, button) {
        const type = field.getAttribute('type') === 'password' ? 'text' : 'password';
        field.setAttribute('type', type);
        
        const icon = button.querySelector('i');
        icon.classList.toggle('fa-eye');
        icon.classList.toggle('fa-eye-slash');
    }
    
    // Password strength indicator
    newPassword1Field.addEventListener('input', function() {
        const password = this.value;
        const strengthDiv = document.getElementById('passwordStrength');
        const strength = calculatePasswordStrength(password);
        
        let strengthText = '';
        let strengthClass = '';
        let progressWidth = 0;
        
        if (password.length === 0) {
            strengthDiv.innerHTML = '';
            return;
        }
        
        if (strength < 2) {
            strengthText = 'Weak';
            strengthClass = 'text-danger';
            progressWidth = 25;
        } else if (strength < 3) {
            strengthText = 'Fair';
            strengthClass = 'text-warning';
            progressWidth = 50;
        } else if (strength < 4) {
            strengthText = 'Good';
            strengthClass = 'text-info';
            progressWidth = 75;
        } else {
            strengthText = 'Strong';
            strengthClass = 'text-success';
            progressWidth = 100;
        }
        
        strengthDiv.innerHTML = `
            <div class="d-flex justify-content-between align-items-center mb-1">
                <small class="${strengthClass}">
                    <i class="fas fa-shield-alt me-1"></i>Password strength: ${strengthText}
                </small>
                <small class="text-muted">${strength}/5</small>
            </div>
            <div class="progress" style="height: 4px;">
                <div class="progress-bar ${strengthClass.replace('text-', 'bg-')}" 
                     style="width: ${progressWidth}%"></div>
            </div>
        `;
    });
    
    function calculatePasswordStrength(password) {
        let strength = 0;
        
        if (password.length >= 8) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/\d/.test(password)) strength++;
        if (/[^\w\s]/.test(password)) strength++;
        
        return strength;
    }
    
    // Password match indicator
    newPassword2Field.addEventListener('input', function() {
        const password1 = newPassword1Field.value;
        const password2 = this.value;
        const matchDiv = document.getElementById('passwordMatch');
        
        if (password2.length === 0) {
            matchDiv.innerHTML = '';
            this.classList.remove('is-valid', 'is-invalid');
            return;
        }
        
        if (password1 === password2) {
            matchDiv.innerHTML = '<small class="text-success"><i class="fas fa-check me-1"></i>Passwords match</small>';
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        } else {
            matchDiv.innerHTML = '<small class="text-danger"><i class="fas fa-times me-1"></i>Passwords do not match</small>';
            this.classList.remove('is-valid');
            this.classList.add('is-invalid');
        }
    });
    
    // Real-time validation for current password
    oldPasswordField.addEventListener('input', function() {
        if (this.value.length > 0) {
            this.classList.remove('is-invalid');
        }
    });
    
    // Form submission with loading state
    passwordChangeForm.addEventListener('submit', function(e) {
        const btnText = changePasswordBtn.querySelector('.btn-text');
        const btnLoading = changePasswordBtn.querySelector('.btn-loading');
        
        // Validate passwords match before submission
        if (newPassword1Field.value !== newPassword2Field.value) {
            e.preventDefault();
            newPassword2Field.classList.add('is-invalid');
            document.getElementById('passwordMatch').innerHTML = 
                '<small class="text-danger"><i class="fas fa-times me-1"></i>Passwords do not match</small>';
            return;
        }
        
        // Show loading state
        btnText.classList.add('d-none');
        btnLoading.classList.remove('d-none');
        changePasswordBtn.disabled = true;
        
        // Re-enable button after 15 seconds (in case of slow response)
        setTimeout(function() {
            btnText.classList.remove('d-none');
            btnLoading.classList.add('d-none');
            changePasswordBtn.disabled = false;
        }, 15000);
    });
    
    // Auto-focus on first input
    if (oldPasswordField) {
        oldPasswordField.focus();
    }
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl/Cmd + Enter to submit form
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            e.preventDefault();
            passwordChangeForm.submit();
        }
        
        // Escape to go back
        if (e.key === 'Escape') {
            window.location.href = '{% url "core:dashboard" %}';
        }
    });
    
    // Add fade-in animation
    const card = document.querySelector('.card');
    card.style.opacity = '0';
    card.style.transform = 'translateY(20px)';
    
    setTimeout(() => {
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        card.style.opacity = '1';
        card.style.transform = 'translateY(0)';
    }, 100);
});
</script>
{% endblock %}