{% extends "admin/base.html" %}

{% block title %}Dashboard Administrativo{% endblock %}

{% block extra_css %}
<style>
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.bg-primary {
    background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
}

.bg-success {
    background: linear-gradient(135deg, #198754, #146c43) !important;
}

.bg-danger {
    background: linear-gradient(135deg, #dc3545, #b02a37) !important;
}

.card .opacity-50 {
    opacity: 0.2 !important;
    transition: all 0.3s ease;
}

.card:hover .opacity-50 {
    opacity: 0.3 !important;
    transform: scale(1.1);
}

.card-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

.display-4 {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0.5rem 0;
}

.btn-group {
    gap: 0.25rem;
}

/* Estilo da lista de usuários */
.card.lista-usuarios {
    border-radius: 0;
    box-shadow: none;
    transition: none;
    border: 1px solid #dee2e6;
}

.card.lista-usuarios:hover {
    transform: none;
    box-shadow: none;
}

.card.lista-usuarios .card-header {
    background: linear-gradient(to right, var(--secondary-dark), var(--secondary-color));
    color: white;
    border: none;
    padding: 1rem 1.5rem;
}

.card.lista-usuarios .card-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.card.lista-usuarios .table {
    margin-bottom: 0;
}

.card.lista-usuarios .table th {
    border-top: none;
    font-weight: 600;
    padding: 1rem;
    background-color: #f8f9fa;
}

.card.lista-usuarios .table td {
    padding: 1rem;
    vertical-align: middle;
}

.card.lista-usuarios .badge {
    padding: 0.5em 0.8em;
    font-weight: 500;
}

.btn-group .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}
</style>
{% endblock %}

{% block content %}
<h2 class="mb-4">
    <i class="fas fa-users-cog"></i> 
    Administração de Usuários
</h2>

<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 text-uppercase">Total de Usuários</h5>
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="display-4 mb-0">{{ total_users }}</h2>
                    <i class="fas fa-users fa-3x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-success text-white">
            <div class="card-body">
                <h5 class="card-title text-uppercase">Usuários Ativos</h5>
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="display-4 mb-0">{{ active_users }}</h2>
                    <i class="fas fa-user-check fa-3x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card bg-danger text-white">
            <div class="card-body">
                <h5 class="card-title text-uppercase">Usuários Inativos</h5>
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="display-4 mb-0">{{ inactive_users }}</h2>
                    <i class="fas fa-user-times fa-3x opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card lista-usuarios">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="fas fa-users me-2"></i>
            Lista de Usuários
        </h5>
    </div>
    <div class="card-body p-0">
        <table id="users-table" class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Email</th>
                    <th>Status</th>
                    <th>Último Login</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>{{ user.name }}</td>
                    <td>{{ user.email }}</td>
                    <td>
                        <span class="badge {% if user.is_active %}bg-success{% else %}bg-danger{% endif %}">
                            {{ "Ativo" if user.is_active else "Inativo" }}
                        </span>
                    </td>
                    <td>{{ user.last_login.strftime('%d/%m/%Y %H:%M') if user.last_login else 'Nunca' }}</td>
                    <td>
                        <div class="btn-group">
                            <form action="{{ url_for('admin.reset_user_otp', user_id=user.id) }}" method="post" class="d-inline">
                                <button type="submit" class="btn btn-warning btn-sm" title="Reset OTP" onclick="return confirm('Confirma o reset do OTP deste usuário?')">
                                    <i class="fas fa-key"></i>
                                </button>
                            </form>
                            <form action="{{ url_for('admin.reset_user_password', user_id=user.id) }}" method="post" class="d-inline">
                                <button type="submit" class="btn btn-info btn-sm" title="Reset Senha" onclick="return confirm('Confirma o reset da senha deste usuário?')">
                                    <i class="fas fa-lock"></i>
                                </button>
                            </form>
                            <form action="{{ url_for('admin.toggle_user_status', user_id=user.id) }}" method="post" class="d-inline">
                                <button type="submit" class="btn btn-{{ 'danger' if user.is_active else 'success' }} btn-sm" title="{{ 'Desativar' if user.is_active else 'Ativar' }} Usuário">
                                    <i class="fas fa-{{ 'user-times' if user.is_active else 'user-check' }}"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('#users-table').DataTable({
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/pt-BR.json'
        },
        order: [[0, 'asc']],
        pageLength: 25
    });
});
</script>
{% endblock %}