{# templates/admin/user/show.html.twig #}

{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Détails de {{ user.fullName }}{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 text-gray-800">Profil Utilisateur</h1>
        <div>
            <a href="{{ path('app_admin_user_index') }}" class="btn btn-secondary shadow-sm">
                <i class="fas fa-arrow-left fa-sm mr-1"></i> Retour à la liste
            </a>
            <a href="{{ path('app_admin_user_edit', {'id': user.id}) }}" class="btn btn-warning shadow-sm">
                <i class="fas fa-edit fa-sm mr-1"></i> Modifier
            </a>
        </div>
    </div>

    <div class="row">
        {# Colonne de GAUCHE : Carte d'identité visuelle #}
        <div class="col-xl-4 col-md-6 mb-4">
            <div class="card shadow h-100 py-2 border-left-primary">
                <div class="card-body">
                    <div class="text-center mb-4">
                        {% if user.photo %}
                            <img src="{{ asset('uploads/users/photo/' ~ user.photo) }}" 
                                 alt="Photo de {{ user.fullName }}" 
                                 class="rounded-circle shadow mb-3" 
                                 style="width: 150px; height: 150px; object-fit: cover; border: 4px solid #fff;">
                        {% else %}
                            <div class="avatar-circle mx-auto bg-primary text-white d-flex align-items-center justify-content-center shadow-sm mb-3" 
                                 style="width: 150px; height: 150px; border-radius: 50%; font-size: 3.5rem;">
                                {{ user.nom|slice(0, 1) }}{{ user.prenoms|slice(0, 1) }}
                            </div>
                        {% endif %}
                        
                        <h5 class="font-weight-bold text-gray-800 mb-1">
                            <span class="text-muted small">{{ user.civilite }}</span> {{ user.nom }} {{ user.prenoms }}
                        </h5>
                        <p class="text-muted mb-2">{{ user.email }}</p>
                        <span class="badge {{ user.type == 'STAFF' ? 'bg-primary' : 'bg-info' }} rounded-pill px-3 py-2">
                            <i class="fas {{ user.type == 'STAFF' ? 'fa-user-tie' : 'fa-user' }} mr-1"></i>
                            {{ user.type == 'STAFF' ? 'Collaborateur Staff' : 'Client' }}
                        </span>
                    </div>
                    
                    <hr class="my-4">
                    
                    <div class="mt-3">
                        <div class="mb-3">
                            <label class="small font-weight-bold text-uppercase text-muted mb-0">Téléphone</label>
                            <p class="text-dark mb-0"><i class="fas fa-phone mr-2 text-primary"></i>{{ user.telephone|default('Non renseigné') }}</p>
                        </div>
                        <div class="mb-3">
                            <label class="small font-weight-bold text-uppercase text-muted mb-0">Adresse</label>
                            <p class="text-dark mb-0"><i class="fas fa-map-marker-alt mr-2 text-primary"></i>{{ user.adresse|default('Non renseignée') }}</p>
                        </div>
                        <div class="mb-0">
                            <label class="small font-weight-bold text-uppercase text-muted mb-0">Membre depuis</label>
                            <p class="text-dark mb-0"><i class="fas fa-calendar-check mr-2 text-primary"></i>{{ user.createdAt|date('d F Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Colonne de DROITE : Détails métier #}
        <div class="col-xl-8 col-md-6 mb-4">
            {% if user.type == 'STAFF' %}
                {# BLOC ORGANISATION POUR LE STAFF #}
                <div class="card shadow mb-4 border-left-success">
                    <div class="card-header py-3 bg-white d-flex align-items-center">
                        <h6 class="m-0 font-weight-bold text-success"><i class="fas fa-sitemap mr-2"></i>Position & Hiérarchie</h6>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center text-center">
                            <div class="col">
                                <div class="small text-muted mb-2 font-weight-bold">RESPONSABLE DIRECT (N+1)</div>
                                {% if user.responsable %}
                                    <a href="{{ path('app_admin_user_show', {'id': user.responsable.id}) }}" class="btn btn-outline-dark btn-sm rounded-pill shadow-sm">
                                        <i class="fas fa-user-shield mr-1"></i> {{ user.responsable.fullName }}
                                    </a>
                                {% else %}
                                    <span class="badge badge-light p-2 border text-muted">Direction Générale</span>
                                {% endif %}
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-chevron-right fa-2x text-gray-300"></i>
                            </div>
                            <div class="col text-center">
                                <div class="small text-muted mb-2 font-weight-bold">POSTE OCCUPÉ</div>
                                <div class="p-2 border border-success rounded bg-success text-white fw-bold shadow-sm">
                                    <i class="fas fa-briefcase mr-1"></i> {{ user.poste ? user.poste.libelle : 'Non assigné' }}
                                </div>
                            </div>
                        </div>

                        {# Sous-équipe #}
                        {% if user.subordonnes|length > 0 %}
                            <div class="mt-5">
                                <h6 class="font-weight-bold text-dark mb-3"><i class="fas fa-users mr-2 text-primary"></i>Équipe sous sa responsabilité ({{ user.subordonnes|length }})</h6>
                                <div class="list-group shadow-sm">
                                    {% for sub in user.subordonnes %}
                                        <a href="{{ path('app_admin_user_show', {'id': sub.id}) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mr-3" style="width: 35px; height: 35px; overflow: hidden;">
                                                    {% if sub.photo %}
                                                        <img src="{{ asset('uploads/users/photo/' ~ sub.photo) }}" class="img-fluid" style="height: 100%; width: 100%; object-fit: cover;">
                                                    {% else %}
                                                        <i class="fas fa-user text-muted"></i>
                                                    {% endif %}
                                                </div>
                                                <span class="font-weight-bold">{{ sub.fullName }}</span>
                                            </div>
                                            <span class="badge badge-secondary badge-pill">{{ sub.poste ? sub.poste.libelle : 'Staff' }}</span>
                                        </a>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% else %}
                {# BLOC DOSSIER POUR LE CLIENT #}
                <div class="card shadow mb-4 border-left-info">
                    <div class="card-header py-3 bg-white">
                        <h6 class="m-0 font-weight-bold text-info"><i class="fas fa-id-card mr-2"></i>Dossier KYC Client</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="small text-muted font-weight-bold text-uppercase">Profession</label>
                                <p class="h6 font-weight-bold">{{ user.profession|default('Non renseignée') }}</p>
                            </div>
                            <div class="col-md-6 mb-4">
                                <label class="small text-muted font-weight-bold text-uppercase">Vérification</label>
                                <div>
                                    {% if user.isVerified %}
                                        <span class="text-success font-weight-bold"><i class="fas fa-check-circle mr-1"></i> Identité Vérifiée</span>
                                    {% else %}
                                        <span class="text-warning font-weight-bold"><i class="fas fa-exclamation-triangle mr-1"></i> En attente de vérification</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="bg-light p-3 rounded">
                                    <label class="small text-muted font-weight-bold text-uppercase d-block">Pièce d'Identité</label>
                                    <span class="badge badge-dark mr-2">{{ user.typePieceIdentite|default('Type inconnu') }}</span>
                                    <span class="font-weight-bold">N° {{ user.numeroPieceIdentite|default('---') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            
            {# Bloc commun : Dernières Activités #}
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-white">
                    <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-history mr-2"></i>Activités Récentes</h6>
                </div>
                <div class="card-body">
                    {% if user.souscriptions|length > 0 %}
                        <p class="small">Historique des souscriptions disponible...</p>
                    {% else %}
                        <div class="text-center py-3">
                            <i class="fas fa-info-circle text-gray-300 fa-2x mb-2"></i>
                            <p class="text-muted small mb-0">Aucun mouvement récent enregistré pour ce profil.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}