{# templates/_shared/user/show_client.html.twig #}
{# Ce template présente exclusivement les informations de l'entité User de type CLIENT #}

	<div
	class="row"> {# COLONNE GAUCHE : Identité et Status #}
	<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/' ~ user.photo) }}" style="width: 120px; height: 120px; object-fit: cover; background: #f8f9fc;">
				{% else %}
					{# Affichage des initiales à partir du Prénom et du Nom #}
					<div class="img-profile rounded-circle border shadow-sm d-flex align-items-center justify-content-center text-white font-weight-bold" style="width: 120px; height: 120px; font-size: 2.5rem; text-transform: uppercase; background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);">

						{% set initial_prenom = user.prenoms ? user.prenoms|slice(0, 1) : '' %}
						{% set initial_nom = user.nom ? user.nom|slice(0, 1) : '' %}

						{% if initial_prenom or initial_nom %}
							{{ (initial_prenom ~ initial_nom)|upper }}
						{% else %}
							<i class="fas fa-user"></i>
						{% endif %}
					</div>
				{% endif %}

				<span class="position-absolute border border-3 border-white rounded-circle {{ user.isActive ? 'bg-success' : 'bg-danger' }}" style="width: 22px; height: 22px; 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 bg-info py-2">TYPE : 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>DOSSIER VÉRIFIÉ
					</span>
				{% else %}
					<span class="badge bg-light text-muted border py-2">
						<i class="fas fa-clock me-1"></i>VÉRIFICATION EN ATTENTE
					</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 de contact</h6>
			<div class="mb-2 small text-dark">
				<i class="fas fa-phone fa-fw me-2 text-muted"></i>
				<strong>Téléphone :</strong>
				{{ user.telephone }}
			</div>
			<div class="mb-2 small text-dark">
				<i class="fas fa-map-marker-alt fa-fw me-2 text-muted"></i>
				<strong>Adresse :</strong>
				{{ user.adresse ?: 'Non renseignée' }}
			</div>
			<div class="small mt-3 text-muted fst-italic">
				Inscrit depuis le :
				{{ user.createdAt|date('d/m/Y') }}
			</div>
		</div>
	</div>

	{# COLONNE DROITE : Informations KYC & Dossier #}
	<div class="col-xl-8 col-lg-7">
		<div class="mb-4">
			<h6 class="text-xs font-weight-bold text-dark text-uppercase mb-3">Informations d'Identification (KYC)</h6>
			<div class="row g-3">
				<div class="col-md-6">
					<div class="p-3 bg-light rounded border shadow-sm-hover">
						<label class="text-xs text-muted text-uppercase fw-bold d-block mb-1">Profession</label>
						<span class="font-weight-bold text-dark">{{ user.profession ?: 'N/A' }}</span>
					</div>
				</div>
				<div class="col-md-6">
					<div class="p-3 bg-light rounded border shadow-sm-hover">
						<label class="text-xs text-muted text-uppercase fw-bold d-block mb-1">Civilité</label>
						<span class="font-weight-bold text-dark">{{ user.civilite }}</span>
					</div>
				</div>
			</div>
		</div>

		<div class="mb-4">
			<h6 class="text-xs font-weight-bold text-dark text-uppercase mb-3">Pièce d'Identité</h6>
			<div class="bg-white border rounded p-0 overflow-hidden shadow-sm">
				<table class="table table-sm mb-0">
					<tbody>
						<tr>
							<td class="bg-light ps-3 fw-bold text-muted" style="width: 40%;">Type de document</td>
							<td class="font-weight-bold">{{ user.typePieceIdentite ?: 'Non spécifié' }}</td>
						</tr>
						<tr>
							<td class="bg-light ps-3 fw-bold text-muted">Numéro de pièce</td>
							<td class="font-weight-bold text-primary">{{ user.numeroPieceIdentite ?: 'Non spécifié' }}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		{# Section Accès #}
		<div>
			<h6 class="text-xs font-weight-bold text-dark text-uppercase mb-3">Statut du compte</h6>
			<div class="d-flex flex-wrap gap-2">
				{% if 'ROLE_CLIENT' in user.roles %}
					<span class="badge bg-white text-dark border">
						<i class="fas fa-user-tag me-1 text-info"></i>
						Client Standard</span>
				{% endif %}
				<span class="badge {{ user.isActive ? 'bg-success-light text-success' : 'bg-danger-light text-danger' }} border">
					<i class="fas fa-circle me-1 small"></i>
					{{ user.isActive ? 'Accès Autorisé' : 'Accès Restreint' }}
				</span>
			</div>
		</div>
	</div>
</div>

<style>
	.bg-success-light {
		background-color: rgba(28, 200, 138, 0.12);
	}
	.bg-danger-light {
		background-color: rgba(231, 74, 59, 0.12);
	}
	.shadow-sm-hover {
		transition: all 0.2s;
	}
	.shadow-sm-hover:hover {
		background-color: #fff !important;
		box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075) !important;
	}
	.text-xs {
		font-size: 0.75rem;
	}
</style>