{# templates/entreprise/gestion_utilisateurs/index.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Gestion des Utilisateurs | {{ app.user.entreprise.raisonSociale }}{% endblock %}

{% block body %}

{# --- LOGIQUE DE CONTRÔLE --- #}
{% set isExpired = (abonnementActuel is null or not abonnementActuel.isActive()) %}
{% set totalUsers = users|length %}
{% set canAddUser = (not isExpired and plan and plan.isMultiUser) %}

<div class="container-fluid py-4 px-md-4 page-container">

    {# --- EN-TÊTE HARMONISÉ --- #}
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h3 class="page-header page-header-top mb-1">Collaborateurs
                <span class="ms-2 badge bg-light text-dark border badge-quota">
                    <strong>{{ totalUsers }}</strong> / {{ (plan and plan.isMultiUser) ? 'illimité' : '1' }}
                </span>
            </h3>
            <p class="text-muted small mb-0 page-description">Gérez les accès et les rôles des membres de votre équipe.</p>
        </div>

        {% if is_granted('ROLE_ENTREPRISE_ROOT') %}
            <div {% if not canAddUser %} data-bs-toggle="tooltip" title="{{ not plan.isMultiUser ? 'Votre abonnement est limité à 1 utilisateur' : 'Abonnement expiré' }}" {% endif %}>
                <a href="{{ canAddUser ? path('app_entreprise_user_new') : (not plan.isMultiUser ? path('app_entreprise_abonnement_plans') : '#') }}" 
                   class="btn btn-success shadow-sm px-4 loyer-express-btn {{ not canAddUser ? 'disabled opacity-50' : '' }}">
                    <i class="fas {{ not canAddUser ? 'fa-lock' : 'fa-plus' }} me-1"></i> Nouveau Collaborateur
                </a>
            </div>
        {% endif %}
    </div>

    {% include 'flash_messages.html.twig' %}

    {# --- TABLEAU HARMONISÉ --- #}
    <div class="card shadow-sm card-table-container">
        <div class="card-body card-body-visible p-0">
            {% if users is empty %}
                <div class="text-center py-5">
                    <i class="fas fa-users-slash fa-3x text-light mb-3"></i>
                    <p class="text-muted">Aucun collaborateur trouvé.</p>
                </div>
            {% else %}
                <div class="table-responsive">
                    <table class="table table-custom table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th class="ps-4">Utilisateur</th>
                                <th>Email</th>
                                <th>Accès / Rôle</th>
                                <th class="text-center">Statut</th>
                                <th>Dernière activité</th>
                                <th class="text-end pe-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in users %}
                                <tr>
                                    <td class="ps-4">
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-placeholder me-3">
                                                {{ user.nom|slice(0,1)|upper }}{{ user.prenom|slice(0,1)|upper }}
                                            </div>
                                            <div>
                                                <div class="fw-bold text-dark">{{ user.nom|upper }} {{ user.prenom }}</div>
                                                <small class="text-muted italic">
                                                    {% if user.civilite == 1 %}M.
                                                    {% elseif user.civilite == 2 %}Mme
                                                    {% elseif user.civilite == 3 %}Mlle
                                                    {% else %}-{% endif %}
                                                </small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="small">
                                        <i class="far fa-envelope me-2 text-muted"></i>{{ user.email }}
                                    </td>
                                    <td>
                                        {% for role in user.roles %}
                                            {% if role == 'ROLE_ENTREPRISE_ROOT' %}
                                                <span class="badge bg-soft-danger text-danger border border-danger-subtle">Admin</span>
                                            {% elseif role == 'ROLE_ENTREPRISE_COLLAB' %}
                                                <span class="badge bg-soft-info text-info border border-info-subtle">Collaborateur</span>
                                            {% endif %}
                                        {% endfor %}
                                    </td>
                                    <td class="text-center">
                                        {% if user.isStatut %}
                                            <span class="badge bg-success-soft text-success rounded-pill px-3">
                                                <i class="fas fa-check-circle me-1"></i> Actif
                                            </span>
                                        {% else %}
                                            <span class="badge bg-light text-muted rounded-pill px-3 border">
                                                <i class="fas fa-times-circle me-1"></i> Inactif
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td class="small text-muted">
                                        <i class="far fa-calendar-alt me-1"></i>
                                        {{ user.createdAt ? user.createdAt|date('d/m/Y') : 'N/A' }}
                                    </td>
                                    <td class="text-end pe-4">
                                        <div class="btn-group">
                                            <button class="btn btn-sm btn-light border dropdown-toggle shadow-sm" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fas fa-ellipsis-h text-muted"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end shadow border-0">
                                                <li>
                                                    <a class="dropdown-item" href="{{ path('app_entreprise_user_show', {'id': user.id}) }}">
                                                        <i class="fas fa-eye me-2 text-default"></i> Voir le profil
                                                    </a>
                                                </li>
                                                {% if is_granted('ROLE_ENTREPRISE_ROOT') %}
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <a class="dropdown-item" href="{{ path('app_entreprise_user_edit', {'id': user.id}) }}">
                                                            <i class="fas fa-pencil-alt me-2 text-default"></i> Modifier
                                                        </a>
                                                    </li>
                                                    {% if user.id != app.user.id %}
                                                        <li>
                                                            <form method="post" action="{{ path('app_entreprise_user_delete', {'id': user.id}) }}" 
                                                                  onsubmit="return confirm('Confirmer la suppression de cet utilisateur ?');" class="btn-delete-item">
                                                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ user.id) }}">
                                                                <button type="submit" class="dropdown-item text-danger">
                                                                    <i class="fas fa-trash-alt me-2"></i> Supprimer
                                                                </button>
                                                            </form>
                                                        </li>
                                                    {% endif %}
                                                {% endif %}
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}