{# templates/_shared/user/show.html.twig #}
<div class="row">
    {# COLONNE GAUCHE : Identité de base #}
    <div class="col-xl-4 col-lg-5 border-end">
        <div class="text-center mb-4">
            <div class="position-relative d-inline-block mb-3">
                {% if user.photo %}
                    <img class="img-profile rounded-circle border shadow-sm" 
                         src="{{ asset('uploads/users/photo/' ~ user.photo) }}"
                         style="width: 120px; height: 120px; object-fit: cover; background: #f8f9fc;">
                {% else %}
                    {# Génération d'un avatar avec initiales #}
                    <div class="img-profile rounded-circle border shadow-sm d-flex align-items-center justify-content-center bg-primary text-white font-weight-bold"
                         style="width: 120px; height: 120px; font-size: 2.5rem; text-transform: uppercase;">
                        {{ user.nom|slice(0, 1) }}{{ user.prenoms|slice(0, 1) }}
                    </div>
                {% endif %}
                
                <span class="position-absolute border border-3 border-white rounded-circle {{ user.isActive ? 'bg-success' : 'bg-danger' }}" 
                      style="width: 20px; height: 20px; bottom: 5px; right: 5px;"
                      title="{{ user.isActive ? 'Compte Actif' : 'Compte Inactif' }}"></span>
            </div>
            
            <h5 class="font-weight-bold text-dark mb-1">{{ user.fullName }}</h5>
            <p class="text-muted small mb-3 text-break">{{ user.email }}</p>

            <div class="d-flex flex-column gap-2 px-3">
                <span class="badge {{ user.type == 'STAFF' ? 'bg-primary' : 'bg-info' }} py-2">
                    {{ user.type == 'STAFF' ? 'PERSONNEL / STAFF' : 'CLIENT' }}
                </span>
                {% if user.isVerified %}
                    <span class="badge bg-success-light text-success border border-success py-2">
                        <i class="fas fa-check-double me-1"></i>VÉRIFIÉ
                    </span>
                {% endif %}
            </div>
        </div>
        
        <div class="mt-4 pt-3 border-top">
            <h6 class="text-xs font-weight-bold text-primary text-uppercase mb-3">Coordonnées</h6>
            <div class="mb-2 small">
                <i class="fas fa-phone fa-fw me-2 opacity-50"></i><strong>Tél :</strong> {{ user.telephone }}
            </div>
            <div class="mb-2 small">
                <i class="fas fa-map-marker-alt fa-fw me-2 opacity-50"></i><strong>Adresse :</strong> {{ user.adresse ?: 'Non renseignée' }}
            </div>
            <div class="small mt-3 text-muted fst-italic">
                Membre depuis le : {{ user.createdAt|date('d/m/Y') }}
            </div>
        </div>
    </div>

    {# COLONNE DROITE : Détails métier et KYC #}
    <div class="col-xl-8 col-lg-7">
        
        {# 1. SECTION MÉTIER (Conditionnelle) #}
        {% if user.type == 'STAFF' %}
            <div class="mb-4">
                <h6 class="text-xs font-weight-bold text-dark text-uppercase mb-3">Position & Hiérarchie</h6>
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="p-3 bg-light rounded border-start border-primary border-4">
                            <label class="text-xs text-muted text-uppercase fw-bold d-block mb-1">Poste</label>
                            <span class="font-weight-bold">{{ user.poste ? user.poste.libelle : 'Non défini' }}</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-3 bg-light rounded border-start border-secondary border-4">
                            <label class="text-xs text-muted text-uppercase fw-bold d-block mb-1">Responsable N+1</label>
                            <span class="font-weight-bold">{{ user.responsable ? user.responsable.fullName : 'Direction' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        {% elseif user.type == 'CLIENT' and souscriptions is defined %}
            <div class="mb-4">
                <h6 class="text-xs font-weight-bold text-dark text-uppercase mb-3">Souscriptions immobilières</h6>
                {% if souscriptions|length > 0 %}
                    <div class="table-responsive border rounded">
                        <table class="table table-sm mb-0">
                            <thead class="table-light small">
                                <tr>
                                    <th>Lot</th>
                                    <th>Date</th>
                                    <th class="text-end">Statut</th>
                                </tr>
                            </thead>
                            <tbody class="small">
                                {% for sous in souscriptions %}
                                    <tr>
                                        <td>{{ sous.lot.nomBien }}</td>
                                        <td></td>
                                        <td class="text-end"><span class="badge bg-light text-dark border"></span></td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-muted small fst-italic">Aucune souscription enregistrée.</p>
                {% endif %}
            </div>
        {% endif %}

        {# 2. SECTION KYC (Identité) #}
        <div class="mb-4">
            <h6 class="text-xs font-weight-bold text-dark text-uppercase mb-3">Identité & KYC</h6>
            <div class="bg-white border rounded p-0 overflow-hidden">
                <table class="table table-sm mb-0 table-striped-columns">
                    <tbody class="small">
                        <tr>
                            <td class="bg-light ps-3 fw-bold" style="width: 35%;">Profession</td>
                            <td>{{ user.profession ?: 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td class="bg-light ps-3 fw-bold">Type de pièce</td>
                            <td>{{ user.typePieceIdentite ?: 'Non spécifié' }}</td>
                        </tr>
                        <tr>
                            <td class="bg-light ps-3 fw-bold">Numéro de pièce</td>
                            <td class="text-primary fw-bold">{{ user.numeroPieceIdentite ?: 'Non spécifié' }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        {# 3. SECTION RÔLES #}
        <div>
            <h6 class="text-xs font-weight-bold text-dark text-uppercase mb-3">Permissions Système</h6>
            <div class="d-flex flex-wrap gap-2">
                {% for role in user.roles %}
                    <span class="badge bg-dark-light text-dark border small">
                        <i class="fas fa-lock me-1 opacity-50"></i>{{ role }}
                    </span>
                {% endfor %}
            </div>
        </div>
    </div>
</div>