<!-- templates/accounts/user_list.html -->
{% extends 'base.html' %}

{% block title %}User Management - Admin{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>User Management</h2>
        <a href="{% url 'admin_register' %}" class="btn btn-primary">
            <i class="fas fa-user-plus"></i> Register New User
        </a>
    </div>

    {% if messages %}
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endfor %}
    {% endif %}

    <div class="card">
        <div class="card-header bg-dark text-white">
            <h5 class="mb-0">Registered Users</h5>
        </div>
        <div class="card-body">
            {% if users %}
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Full Name</th>
                            <th>User Type</th>
                            <th>Status</th>
                            <th>Date Joined</th>
                            <th>Last Login</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr>
                            <td>
                                <strong>{{ user.username }}</strong>
                                {% if user.is_superuser %}
                                <span class="badge bg-danger ms-1">Super Admin</span>
                                {% endif %}
                            </td>
                            <td>{{ user.email|default:"-" }}</td>
                            <td>
                                {% if user.first_name or user.last_name %}
                                    {{ user.first_name }} {{ user.last_name }}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td>
                                <span class="badge 
                                    {% if user.userprofile.user_type == 'student' %}bg-info
                                    {% elif user.userprofile.user_type == 'trainer' %}bg-warning
                                    {% elif user.userprofile.user_type == 'admin' %}bg-danger
                                    {% else %}bg-secondary{% endif %}">
                                    {{ user.userprofile.get_user_type_display }}
                                </span>
                            </td>
                            <td>
                                {% if user.is_active %}
                                <span class="badge bg-success">Active</span>
                                {% else %}
                                <span class="badge bg-secondary">Inactive</span>
                                {% endif %}
                            </td>
                            <td>{{ user.date_joined|date:"M d, Y" }}</td>
                            <td>{{ user.last_login|date:"M d, Y H:i"|default:"Never" }}</td>
                            <td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <!-- View User Details -->
                                        <a href="{% url 'user_detail' user.id %}" class="btn btn-outline-primary" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        
                                        <!-- Edit User -->
                                        <a href="{% url 'edit_user' user.id %}" class="btn btn-outline-secondary" title="Edit User">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                                                        <!-- Delete User -->
                                            {% if not user.is_superuser %}
                                            <form action="{% url 'delete_user' user.id %}" method="post" class="d-inline">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-outline-danger" title="Delete User"
                                                        onclick="return confirm('Are you sure you want to delete {{ user.username }}?')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                            {% endif %}
                                            
                                            <!-- Activate/Deactivate Toggle -->
                                            <form action="{% url 'toggle_user_status' user.id %}" method="post" class="d-inline">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-outline-{% if user.is_active %}warning{% else %}success{% endif %}" 
                                                        title="{% if user.is_active %}Deactivate{% else %}Activate{% endif %} User">
                                                    <i class="fas fa-{% if user.is_active %}times{% else %}check{% endif %}"></i>
                                                </button>
                                            </form>
                                    </div>
                                </td>
                                
                                <!-- Delete Confirmation Modal -->
                                {% if not user.is_superuser %}
                                <div class="modal fade" id="deleteModal{{ user.id }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Confirm Delete</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <p>Are you sure you want to delete user <strong>{{ user.username }}</strong>?</p>
                                                <p class="text-danger">This action cannot be undone. All user data will be permanently deleted.</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                <form action="{% url 'delete_user' user.id %}" method="post">
                                                    {% csrf_token %}
                                                    <button type="submit" class="btn btn-danger">Delete User</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- User Statistics -->
            <div class="row mt-4">
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">{{ users.count }}</h5>
                            <p class="card-text">Total Users</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center bg-info text-white">
                        <div class="card-body">
                            <h5 class="card-title">{{ students_count }}</h5>
                            <p class="card-text">Students</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center bg-warning text-white">
                        <div class="card-body">
                            <h5 class="card-title">{{ trainers_count }}</h5>
                            <p class="card-text">Trainers</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center bg-danger text-white">
                        <div class="card-body">
                            <h5 class="card-title">{{ admins_count }}</h5>
                            <p class="card-text">Admins</p>
                        </div>
                    </div>
                </div>
            </div>

            {% else %}
            <div class="text-center py-4">
                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                <h5>No users found</h5>
                <p class="text-muted">Get started by registering your first user.</p>
                <a href="{% url 'admin_register' %}" class="btn btn-primary">
                    <i class="fas fa-user-plus"></i> Register First User
                </a>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Quick Filters -->
    <div class="card mt-4">
        <div class="card-header">
            <h6 class="mb-0">Quick Filters</h6>
        </div>
        <div class="card-body">
            <div class="btn-group">
                <a href="?" class="btn btn-outline-dark">All Users</a>
                <a href="?type=student" class="btn btn-outline-info">Students</a>
                <a href="?type=trainer" class="btn btn-outline-warning">Trainers</a>
                <a href="?type=admin" class="btn btn-outline-danger">Admins</a>
                <a href="?status=active" class="btn btn-outline-success">Active</a>
                <a href="?status=inactive" class="btn btn-outline-secondary">Inactive</a>
            </div>
        </div>
    </div>
</div>

<style>
    .table th {
        font-weight: 600;
        background-color: #f8f9fa;
    }
    
    .badge {
        font-size: 0.75em;
    }
    
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0, 123, 255, 0.1);
    }
    
    .modal-content {
        border: none;
        border-radius: 0.5rem;
    }
</style>

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Search functionality
    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.placeholder = 'Search users...';
    searchInput.className = 'form-control mb-3';
    searchInput.addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        const rows = document.querySelectorAll('table tbody tr');
        
        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            if (text.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });

    // Add search input to the table
    const table = document.querySelector('table');
    if (table) {
        table.parentNode.insertBefore(searchInput, table);
    }

    // Sortable table functionality
    const headers = document.querySelectorAll('th');
    headers.forEach((header, index) => {
        header.style.cursor = 'pointer';
        header.addEventListener('click', () => {
            sortTable(index);
        });
    });

    function sortTable(column) {
        // Implement table sorting logic here
        console.log('Sorting by column:', column);
    }
});
</script>
{% endblock %}
{% endblock %}