<?php
$title = 'Change Password';
$active = 'profile';
$extra_css = [BASE_URL . '/assets/css/auth.css'];
require_once __DIR__ . '/../layouts/header.php';
require_once __DIR__ . '/../layouts/sidebar.php';
?>

<div class="container-fluid">
    <div class="page-header">
        <div class="header-content">
            <h1><i class="fas fa-key"></i> Change Password</h1>
            <p>Update your account password</p>
        </div>
        <div class="header-actions">
            <a href="<?php echo BASE_URL; ?>/dashboard" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Dashboard
            </a>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="form-section">
                <div class="section-title">
                    <h3><i class="fas fa-lock"></i> Password Update</h3>
                </div>

                <form method="POST" action="<?php echo BASE_URL; ?>/auth/change-password" id="passwordForm">
                    <?php echo Security::csrfField(); ?>

                    <div class="form-group">
                        <label class="required">Current Password</label>
                        <div class="input-with-icon">
                            <i class="fas fa-lock"></i>
                            <input type="password" name="current_password" id="current_password" required>
                            <button type="button" class="password-toggle" data-target="current_password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="required">New Password</label>
                        <div class="input-with-icon">
                            <i class="fas fa-lock"></i>
                            <input type="password" name="new_password" id="new_password" required minlength="8">
                            <button type="button" class="password-toggle" data-target="new_password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <div class="strength-meter" id="passwordStrength"></div>
                        <small class="form-hint">
                            Minimum 8 characters with uppercase, lowercase, number and special character
                        </small>
                    </div>

                    <div class="form-group">
                        <label class="required">Confirm New Password</label>
                        <div class="input-with-icon">
                            <i class="fas fa-lock"></i>
                            <input type="password" name="confirm_password" id="confirm_password" required>
                            <button type="button" class="password-toggle" data-target="confirm_password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <small id="passwordMatch" class="form-hint"></small>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-success submit-btn">
                            <i class="fas fa-save"></i> Update Password
                        </button>
                        <a href="<?php echo BASE_URL; ?>/dashboard" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Password toggle
document.querySelectorAll('.password-toggle').forEach(button => {
    button.addEventListener('click', function() {
        const targetId = this.dataset.target;
        const input = document.getElementById(targetId);
        const icon = this.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 checker
function checkPasswordStrength(password) {
    let strength = 0;
    
    if (password.length >= 8) strength++;
    if (password.length >= 12) strength++;
    if (/[A-Z]/.test(password)) strength++;
    if (/[a-z]/.test(password)) strength++;
    if (/[0-9]/.test(password)) strength++;
    if (/[^A-Za-z0-9]/.test(password)) strength++;
    
    return Math.min(strength, 4);
}

document.getElementById('new_password').addEventListener('input', function() {
    const strength = checkPasswordStrength(this.value);
    const meter = document.getElementById('passwordStrength');
    
    const messages = ['Weak', 'Fair', 'Good', 'Strong', 'Very Strong'];
    meter.textContent = messages[strength];
    meter.className = 'strength-meter strength-' + strength;
});

// Password match validation
document.getElementById('confirm_password').addEventListener('input', function() {
    const newPass = document.getElementById('new_password').value;
    const match = document.getElementById('passwordMatch');
    
    if (this.value === newPass) {
        match.innerHTML = '<span class="text-success">✓ Passwords match</span>';
        this.setCustomValidity('');
    } else {
        match.innerHTML = '<span class="text-danger">✗ Passwords do not match</span>';
        this.setCustomValidity('Passwords do not match');
    }
});

document.getElementById('passwordForm').addEventListener('submit', function(e) {
    const newPass = document.getElementById('new_password').value;
    const confirmPass = document.getElementById('confirm_password').value;
    
    if (newPass !== confirmPass) {
        e.preventDefault();
        alert('Passwords do not match');
        return false;
    }
    
    if (checkPasswordStrength(newPass) < 2) {
        e.preventDefault();
        alert('Password is too weak. Please use a stronger password.');
        return false;
    }
});
</script>

<?php require_once __DIR__ . '/../layouts/footer.php'; ?>