{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold">
                <i class="bi bi-people text-primary"></i>
                System Users
            </h2>

            <p class="text-muted mb-0">
                Manage all users in the system.
            </p>

        </div>

        <a href="/users/new" class="btn btn-primary">

            <i class="bi bi-person-plus"></i>

            New User

        </a>

    </div>

    <!-- Users Table -->
    <div class="card shadow-sm">

        <div class="card-header bg-primary text-white d-flex justify-content-between">

            <span>

                <i class="bi bi-people"></i>

                User List

            </span>

            <span class="badge bg-light text-dark">

                {{ users|length }} Users

            </span>

        </div>

        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0">

                    <thead class="table-light">

                        <tr>

                            <th>ID</th>

                            <th>Username</th>

                            <th>Full Name</th>

                            <th>Email</th>

                            <th>Role</th>

                            <th>Department</th>

                            <th>Status</th>

                            <th>Actions</th>

                        </tr>

                    </thead>

                    <tbody>

                    {% for user in users %}

                        <tr>

                            <td>

                                <strong>{{ user.id }}</strong>

                            </td>

                            <td>

                                <code>{{ user.username }}</code>

                            </td>

                            <td>

                                {{ user.full_name or "-" }}

                            </td>

                            <td>

                                {{ user.email }}

                            </td>

                            <td>

                                <span class="badge bg-{% if user.role == 'Admin' %}danger{% elif user.role == 'Director' %}warning{% elif user.role == 'Engineer' %}info{% elif user.role == 'Procurement' %}primary{% else %}secondary{% endif %}">

                                    {{ user.role }}

                                </span>

                            </td>

                            <td>

                                {{ user.department or "-" }}

                            </td>

                            <td>

                                {% if user.is_active %}

                                    <span class="badge bg-success">Active</span>

                                {% else %}

                                    <span class="badge bg-danger">Inactive</span>

                                {% endif %}

                            </td>

                            <td>

                                <a href="/users/{{ user.id }}/edit" class="btn btn-sm btn-warning">

                                    <i class="bi bi-pencil"></i>

                                </a>

                                <!-- ✅ TOGGLE ACTIVE/INACTIVE BUTTON -->
                                {% if current_user.role == "Admin" and user.id != current_user.id %}

                                    {% if user.is_active %}

                                        <button class="btn btn-sm btn-danger" 
                                                data-user-id="{{ user.id }}"
                                                onclick="toggleUserStatus(this, 'deactivate')"
                                                title="Deactivate User">
                                            <i class="bi bi-x-circle"></i>
                                        </button>

                                    {% else %}

                                        <button class="btn btn-sm btn-success" 
                                                data-user-id="{{ user.id }}"
                                                onclick="toggleUserStatus(this, 'activate')"
                                                title="Activate User">
                                            <i class="bi bi-check-circle"></i>
                                        </button>

                                    {% endif %}

                                {% endif %}

                                <!-- ✅ DELETE BUTTON - PERMANENT DELETE (Admin Only) -->
                                {% if current_user.role == "Admin" and user.id != current_user.id %}
                                <button class="btn btn-sm btn-danger" 
                                        onclick="confirmDelete('/users/{{ user.id }}/delete', 'User: {{ user.username }} ({{ user.full_name }})')"
                                        title="Permanently Delete User">
                                    <i class="bi bi-trash"></i>
                                </button>
                                {% endif %}

                            </td>

                        </tr>

                    {% else %}

                        <tr>

                            <td colspan="8" class="text-center text-muted py-4">

                                <i class="bi bi-people fs-1 d-block"></i>

                                No users found.

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

<script>
    function toggleUserStatus(button, action) {
        const userId = button.getAttribute('data-user-id');
        const confirmMessage = action === 'activate' 
            ? "Are you sure you want to ACTIVATE this user?" 
            : "Are you sure you want to DEACTIVATE this user?";
        
        if (confirm(confirmMessage)) {
            const url = action === 'activate' 
                ? `/users/${userId}/activate` 
                : `/users/${userId}/deactivate`;
            
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('An error occurred. Please try again.');
                }
            }).catch(error => {
                alert('An error occurred. Please try again.');
            });
        }
    }
</script>

{% endblock %}