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

{% block title %}Détail de {{ user.nomComplet }} | {{ user.entreprise.raisonSociale }}{% endblock %}

{% block body %}

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

    {# --- 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">Collaborateur : {{ user.nomComplet }}</h3>
            <p class="text-muted small mb-0 d-none d-md-block">Fiche utilisateur détaillée et gestion des accès.</p>
        </div>
        
        <div class="d-flex gap-2">
            <a href="{{ path('app_entreprise_user_index') }}" class="btn btn-sm btn-outline-secondary btn-return shadow-sm px-3">
                <i class="fas fa-arrow-left me-1"></i> Retour à la liste
            </a>

            {% if is_granted('ROLE_ENTREPRISE_ROOT') %}
                <a href="{{ path('app_entreprise_user_edit', {'id': user.id}) }}" class="btn btn-sm btn-warning shadow-sm px-3">
                    <i class="fas fa-edit me-1"></i> Modifier
                </a>
            {% endif %}
        </div>
    </div>

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

    <div class="row g-4">
        {# --- COLONNE GAUCHE : FICHE D'IDENTITÉ --- #}
        <div class="col-12 col-lg-7">
            <div class="card card-detail shadow-sm mb-4">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center mb-4 border-bottom pb-3">
                        <div class="avatar-lg me-3">
                            {{ user.nom|slice(0,1)|upper }}{{ user.prenom|slice(0,1)|upper }}
                        </div>
                        <div>
                            <h6 class="fw-bold mb-0 text-uppercase small text-muted">Profil Collaborateur</h6>
                            <div class="info-value fs-5">
                                {{ user.civilite == 1 ? 'M.' : (user.civilite == 2 ? 'Mme' : 'Mlle') }} 
                                {{ user.nomComplet }}
                            </div>
                        </div>
                    </div>
                    
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="info-label text-uppercase mb-1"><i class="fas fa-envelope me-2 text-primary"></i>Email de connexion</div>
                            <div class="info-value"><a href="mailto:{{ user.email }}" class="text-decoration-none">{{ user.email }}</a></div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-label text-uppercase mb-1"><i class="fas fa-phone me-2 text-primary"></i>Téléphone</div>
                            <div class="info-value">{{ user.telephone|default('<span class="text-muted italic small">Non renseigné</span>')|raw }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-label text-uppercase mb-1"><i class="fas fa-building me-2 text-primary"></i>Entreprise</div>
                            <div class="info-value">{{ user.entreprise.raisonSociale }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-label text-uppercase mb-1"><i class="fas fa-calendar-alt me-2 text-primary"></i>Membre depuis le</div>
                            <div class="info-value">{{ user.createdAt ? user.createdAt|date('d/m/Y') : '-' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {# Historique des connexions ou Journal (Optionnel, ici info système) #}
            <div class="card card-detail shadow-sm">
                <div class="card-header bg-white py-3">
                    <h6 class="fw-bold mb-0">Informations système</h6>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-sm-6 mb-3 mb-sm-0">
                            <small class="text-muted d-block">Identifiant unique (ID)</small>
                            <code class="text-primary fw-bold">#{{ user.id }}</code>
                        </div>
                        <div class="col-sm-6">
                            <small class="text-muted d-block">Dernière mise à jour</small>
                            <span class="small">{{ user.updatedAt ? user.updatedAt|date('d/m/Y à H:i') : 'Jamais' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# --- COLONNE DROITE : STATUT & SÉCURITÉ --- #}
        <div class="col-12 col-lg-5">
            
            {# Statut du compte #}
            <div class="card card-detail shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h6 class="fw-bold mb-0">Accès et Permissions</h6>
                </div>
                <div class="card-body p-4 text-center">
                    <div class="avatar bg-{{ user.isStatut ? 'soft-success' : 'light' }} text-{{ user.isStatut ? 'success' : 'muted' }} mb-3 mx-auto rounded-circle d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                        <i class="fas {{ user.isStatut ? 'fa-user-check' : 'fa-user-lock' }} fa-lg"></i>
                    </div>
                    
                    <h6 class="fw-bold mb-1">{{ user.isStatut ? 'Compte Actif' : 'Compte Suspendu' }}</h6>
                    <div class="mb-4">
                        {% for role in user.roles %}
                            {% if role == 'ROLE_ENTREPRISE_ROOT' %}
                                <span class="badge bg-danger shadow-sm px-3">Administrateur (ROOT)</span>
                            {% elseif role == 'ROLE_ENTREPRISE_COLLAB' %}
                                <span class="badge bg-info text-white shadow-sm px-3">Collaborateur</span>
                            {% endif %}
                        {% endfor %}
                    </div>

                    <p class="small text-muted mb-0">
                        Ce collaborateur a accès à la gestion de l'entreprise <strong>{{ user.entreprise.raisonSociale }}</strong>.
                    </p>
                </div>
            </div>

            {# Zone de Danger (Uniquement si ce n'est pas le compte courant) #}
            {% if is_granted('ROLE_ENTREPRISE_ROOT') and user.id != app.user.id %}
                <div class="card border-0 shadow-sm bg-soft-danger" style="border-radius: 10px;">
                    <div class="card-body p-4">
                        <h6 class="text-danger fw-bold mb-2 small text-uppercase">
                            <i class="fas fa-exclamation-triangle me-2"></i>Zone de danger
                        </h6>
                        <p class="text-muted mb-3" style="font-size: 11px;">
                            La suppression d'un collaborateur retire immédiatement ses accès. Cette action est irréversible.
                        </p>
                        {{ include('entreprise/gestion_utilisateurs/_delete_form.html.twig') }}
                    </div>
                </div>
            {% endif %}

        </div>
    </div>
</div>
{% endblock %}