{{template "dashboard/layout.html" .}}

{{define "content"}}
<div class="card shadow-sm border-0">
    <div class="card-header py-3" style="background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);">
        <h5 class="mb-0 text-white"><i class='bx bx-lock-alt me-2'></i> Change Password</h5>
    </div>
    <div class="card-body p-4">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">
                <!-- Security tip -->
                <div class="alert alert-info border-0 mb-4" style="background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);">
                    <div class="d-flex align-items-center">
                        <i class='bx bx-shield-quarter bx-md text-primary me-3'></i>
                        <div>
                            <strong class="text-primary">Security tip</strong>
                            <p class="mb-0 small text-muted mt-1">Use a strong password (at least 8 characters with letters, numbers, and symbols) to keep your account secure.</p>
                        </div>
                    </div>
                </div>
                
                <form id="password-form">
                    <div class="mb-4">
                        <label class="form-label fw-bold"><i class='bx bx-lock text-muted me-1'></i>Current password</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class='bx bx-key'></i></span>
                            <input type="password" class="form-control" name="old_password" id="old_password" placeholder="Enter your current password" required autofocus>
                            <button class="btn btn-light" type="button" onclick="togglePassword('old_password', this)" title="Show/hide password">
                                <i class='bx bx-hide'></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-bold"><i class='bx bx-lock-alt text-muted me-1'></i>New password</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class='bx bx-lock-open'></i></span>
                            <input type="password" class="form-control" name="new_password" id="new_password" placeholder="Enter new password (min. 6 characters)" required>
                            <button class="btn btn-light" type="button" onclick="togglePassword('new_password', this)" title="Show/hide password">
                                <i class='bx bx-hide'></i>
                            </button>
                        </div>
                        <div class="password-strength mt-2" id="password-strength" style="display:none;">
                            <div class="d-flex gap-1 mb-1">
                                <div class="strength-bar" style="height:4px;flex:1;background:#e2e8f0;border-radius:2px;"></div>
                                <div class="strength-bar" style="height:4px;flex:1;background:#e2e8f0;border-radius:2px;"></div>
                                <div class="strength-bar" style="height:4px;flex:1;background:#e2e8f0;border-radius:2px;"></div>
                                <div class="strength-bar" style="height:4px;flex:1;background:#e2e8f0;border-radius:2px;"></div>
                            </div>
                            <small class="strength-text text-muted"></small>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-bold"><i class='bx bx-check-shield text-muted me-1'></i>Confirm new password</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class='bx bx-check-double'></i></span>
                            <input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Confirm new password" required>
                            <button class="btn btn-light" type="button" onclick="togglePassword('confirm_password', this)" title="Show/hide password">
                                <i class='bx bx-hide'></i>
                            </button>
                        </div>
                        <small class="text-danger" id="confirm-error" style="display:none;"><i class='bx bx-x-circle me-1'></i>Passwords don't match.</small>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class='bx bx-check-circle me-1'></i>Update password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
// Toggle password visibility
function togglePassword(inputId, btn) {
    var input = document.getElementById(inputId);
    var icon = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'bx bx-show';
    } else {
        input.type = 'password';
        icon.className = 'bx bx-hide';
    }
}

// Check password strength
function checkPasswordStrength(password) {
    var strength = 0;
    if (password.length >= 6) strength++;
    if (password.length >= 8) strength++;
    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
    if (/\d/.test(password)) strength++;
    if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++;
    return Math.min(strength, 4);
}

$(function(){
    // New password strength indicator
    $('#new_password').on('input', function(){
        var pwd = $(this).val();
        var $container = $('#password-strength');
        if (pwd.length === 0) {
            $container.hide();
            return;
        }
        $container.show();
        var strength = checkPasswordStrength(pwd);
        var colors = ['#ef4444', '#ef4444', '#f97316', '#eab308', '#22c55e'];
        var texts = ['Too short', 'Weak', 'Fair', 'Good', 'Strong'];
        $container.find('.strength-bar').each(function(i){
            $(this).css('background', i < strength ? colors[strength] : '#e2e8f0');
        });
        $container.find('.strength-text').text(texts[strength]).css('color', colors[strength]);
    });
    
    // Confirm password match
    $('#confirm_password').on('input', function(){
        var newPwd = $('#new_password').val();
        var confirmPwd = $(this).val();
        if (confirmPwd.length > 0 && newPwd !== confirmPwd) {
            $('#confirm-error').show();
        } else {
            $('#confirm-error').hide();
        }
    });
    
    $('#password-form').on('submit', function(e){
        e.preventDefault();
        var old_pwd = $('input[name=old_password]').val();
        var new_pwd = $('input[name=new_password]').val();
        var confirm_pwd = $('input[name=confirm_password]').val();
        if(new_pwd !== confirm_pwd){
            BootstrapModal.msg('Passwords don\'t match.', {icon: 2});
            return;
        }
        if(new_pwd.length < 6){
            BootstrapModal.msg('Password must be at least 6 characters long.', {icon: 2});
            return;
        }
        $.ajax({
            url: '/api?mod=user&act=password',
            type: 'POST',
            data: {old_password: old_pwd, new_password: new_pwd},
            dataType: 'json',
            success: function(res){
                if(res.success){
                    BootstrapModal.msg('Password updated. Redirecting to login…', {icon: 1, time: 2000}, function(){
                        $.get('/api?mod=user&act=logout', function(){
                            window.location.href = '/login?msg=password_changed';
                        });
                    });
                } else {
                    BootstrapModal.msg(res.message || 'Could not update password. Please try again.', {icon: 2});
                }
            },
            error: function(xhr){
                var msg = 'Something went wrong. Please try again later.';
                try {
                    var res = JSON.parse(xhr.responseText);
                    msg = res.message || msg;
                } catch(e) {}
                BootstrapModal.msg(msg, {icon: 2});
            }
        });
    });
});
</script>
{{end}}