{% extends "base.html" %}

{% block title %}Edit User - QuantumQuickSales{% endblock %}

{% block page_title %}Edit User{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Edit User Information</h6>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" name="username" value="{{ user[1] }}" readonly>
                        <div class="form-text">Username cannot be changed</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="password" class="form-label">New Password</label>
                        <input type="password" class="form-control" id="password" name="password" minlength="6">
                        <div class="form-text">Leave blank to keep current password</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="confirm_password" class="form-label">Confirm New Password</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" minlength="6">
                        <div class="form-text">Re-enter the new password to confirm</div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label">User Access Level *</label>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="is_admin" id="regular_user" value="0" 
                                   {% if not user[3] %}checked{% endif %}>
                            <label class="form-check-label" for="regular_user">
                                <i class="fas fa-user text-primary me-2"></i>
                                <strong>Regular User</strong>
                            </label>
                            <div class="form-text ms-4">
                                • Create and manage invoices<br>
                                • Search invoice history<br>
                                • Delete own invoices (within 5 minutes)<br>
                                • View product catalog
                            </div>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="is_admin" id="admin_user" value="1"
                                   {% if user[3] %}checked{% endif %}>
                            <label class="form-check-label" for="admin_user">
                                <i class="fas fa-user-shield text-danger me-2"></i>
                                <strong>Administrator</strong>
                            </label>
                            <div class="form-text ms-4">
                                • All regular user permissions<br>
                                • Manage products and inventory<br>
                                • Manage users and access levels<br>
                                • View all invoices and reports<br>
                                • System configuration
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Important:</strong> Changing user access levels affects system security. Choose carefully!
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('admin_users') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Users
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Update User
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.querySelector('form').addEventListener('submit', function(e) {
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    if (password && password !== confirmPassword) {
        e.preventDefault();
        alert('Passwords do not match! Please try again.');
        return false;
    }
    
    if (password && password.length < 6) {
        e.preventDefault();
        alert('Password must be at least 6 characters long!');
        return false;
    }
    
    const isAdmin = document.querySelector('input[name="is_admin"]:checked').value;
    const currentIsAdmin = {{ 'true' if user[3] else 'false' }};
    
    if (isAdmin === '1' && !currentIsAdmin) {
        if (!confirm('Are you sure you want to grant admin access to this user? Admin users have full system access.')) {
            e.preventDefault();
            return false;
        }
    }
    
    if (isAdmin === '0' && currentIsAdmin) {
        if (!confirm('Are you sure you want to remove admin access from this user? This will limit their system permissions.')) {
            e.preventDefault();
            return false;
        }
    }
});
</script>
{% endblock %}