{% extends "base.html" %}

{% block title %}User Management - AsapLoads POS{% endblock %}

{% block header_title %}User Management{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card mb-0">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-0">User Management</h5>
                    <small class="text-muted">Manage users and their access roles</small>
                </div>
                <a href="{% url 'user_add' %}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Add New User
                </a>
            </div>
            <div class="card-body">
                <p class="text-muted">
                    Create and manage user accounts with different roles. Each user will have their own login credentials to access the system based on their assigned role.
                </p>
                
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <h5 class="card-title">Admin Users</h5>
                                <p class="mb-2">{{ admin_count }}</p>
                                <small>Full system access and management</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <h5 class="card-title">Managers</h5>
                                <p class="mb-2">{{ manager_count }}</p>
                                <small>Branch supervision and operations</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-info text-white">
                            <div class="card-body">
                                <h5 class="card-title">Cashiers</h5>
                                <p class="mb-2">{{ cashier_count }}</p>
                                <small>Sales and basic operations</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- User filters -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="btn-group" role="group" aria-label="Filter users">
                        <button type="button" class="btn btn-outline-secondary active" onclick="filterUsers('all')">All Users</button>
                        <button type="button" class="btn btn-outline-primary" onclick="filterUsers('admin')">Admins</button>
                        <button type="button" class="btn btn-outline-success" onclick="filterUsers('manager')">Managers</button>
                        <button type="button" class="btn btn-outline-info" onclick="filterUsers('cashier')">Cashiers</button>
                    </div>
                    <div class="search-box">
                        <input type="text" id="userSearch" class="form-control" placeholder="Search users..." onkeyup="searchUsers()">
                    </div>
                </div>
                
                {% if users %}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="usersTable">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Branch</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for user_obj in users %}
                                    <tr class="user-row" data-role="{{ user_obj.role }}">
                                        <td>{{ user_obj.get_full_name }}</td>
                                        <td>{{ user_obj.email }}</td>
                                        <td>
                                            <span class="badge bg-{% if user_obj.role == 'admin' %}primary{% elif user_obj.role == 'manager' %}success{% else %}info{% endif %}">
                                                {{ user_obj.role|title }}
                                            </span>
                                        </td>
                                        <td>{{ user_obj.branch.name|default:"N/A" }}</td>
                                        <td>
                                            {% if user_obj.is_active %}
                                                <span class="badge bg-success">Active</span>
                                            {% else %}
                                                <span class="badge bg-danger">Inactive</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{% url 'user_edit' user_obj.id %}" class="btn btn-outline-primary" title="Edit User">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <a href="{% url 'user_reset_password' user_obj.id %}" class="btn btn-outline-secondary" title="Reset Password">
                                                    <i class="fas fa-key"></i>
                                                </a>
                                                {% if user_obj.id != user.id %}
                                                    <a href="{% url 'user_delete' user_obj.id %}" class="btn btn-outline-danger" title="Delete User">
                                                        <i class="fas fa-trash"></i>
                                                    </a>
                                                {% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="alert alert-info">
                        <p class="mb-0">No users found. <a href="{% url 'user_add' %}">Add a user</a> to get started.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
// Filter users by role
function filterUsers(role) {
    const rows = document.querySelectorAll('.user-row');
    const buttons = document.querySelectorAll('.btn-group[role="group"] .btn');
    
    // Update active button
    buttons.forEach(btn => {
        btn.classList.remove('active');
        if (btn.textContent.toLowerCase().includes(role) || (role === 'all' && btn.textContent.includes('All'))) {
            btn.classList.add('active');
        }
    });
    
    // Filter rows
    rows.forEach(row => {
        if (role === 'all' || row.getAttribute('data-role') === role) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Search users
function searchUsers() {
    const input = document.getElementById('userSearch');
    const filter = input.value.toUpperCase();
    const table = document.getElementById('usersTable');
    const rows = table.getElementsByTagName('tr');
    
    for (let i = 1; i < rows.length; i++) { // Start from 1 to skip header
        const nameCol = rows[i].getElementsByTagName('td')[0];
        const emailCol = rows[i].getElementsByTagName('td')[1];
        const branchCol = rows[i].getElementsByTagName('td')[3];
        
        if (nameCol && emailCol && branchCol) {
            const nameText = nameCol.textContent || nameCol.innerText;
            const emailText = emailCol.textContent || emailCol.innerText;
            const branchText = branchCol.textContent || branchCol.innerText;
            
            if (nameText.toUpperCase().indexOf(filter) > -1 || 
                emailText.toUpperCase().indexOf(filter) > -1 || 
                branchText.toUpperCase().indexOf(filter) > -1) {
                rows[i].style.display = '';
            } else {
                rows[i].style.display = 'none';
            }
        }
    }
}
</script>
{% endblock %}
{% endblock %}