{# templates/commercial/portefeuille/show_valide.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Dossier
	{{ souscription.client.nom }}
	- Portefeuille Client
{% endblock %}

{% block content %}
	<div
		class="container-fluid py-4">
		{# Header : Fil d'ariane et Actions rapides #}
		<div class="d-flex justify-content-between align-items-center mb-4">
			<div>
				<h3 class="page-header page-header-top mb-0">Gestion du Dossier Client</h3>
				<p class="text-muted small mb-0">
					<i class="fas fa-id-card me-1 text-primary"></i>
					Consultation du profil et suivi des souscriptions rattachées.
				</p>
			</div>
			<div class="d-flex gap-2">
				<a href="{{ path('app_commercial_portefeuille_index') }}" class="btn btn-light border shadow-sm px-3 d-flex align-items-center">
					<i class="fas fa-arrow-left me-2 text-secondary"></i>
					<span>Retour à la liste</span>
				</a>
			</div>
		</div>

		{# En-tête informatif avec indicateurs de progression #}
		<div class="card border-0 shadow-sm mb-4 border-start border-primary border-5">
			<div class="card-body">
				<div
					class="row align-items-center">
					{# 1. Photo / Initiales #}
					<div class="col-auto">
						{% if souscription.client.photo %}
							<img src="{{ asset('uploads/users/photo/' ~ souscription.client.photo) }}" class="rounded-circle object-fit-cover shadow-sm border border-2 border-white" style="width: 65px; height: 65px;" alt="{{ souscription.client.nom }}">
						{% else %}
							<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center fw-bold shadow-sm" style="width: 65px; height: 65px; font-size: 1.3rem; text-transform: uppercase;">
								{{ souscription.client.nom|slice(0, 1) }}{{ souscription.client.prenoms|slice(0, 1) }}
							</div>
						{% endif %}
					</div>

					{# 2. Infos Client & Bien #}
					<div class="col-md-3">
						<h2 class="h4 mb-0 fw-bold text-dark">{{ souscription.client.nom|upper }}
							{{ souscription.client.prenoms }}</h2>
						<p class="text-muted mb-0 small">
							<i class="fas fa-map-marker-alt me-1 text-primary"></i>
							{{ souscription.lot.projet.nom }}
							—
							<strong>{{ souscription.lot.nomBien }}</strong>
						</p>
						<div class="badge bg-light text-dark border mt-1 fw-normal" style="font-size: 0.75rem;">
							{{ souscription.lot.surfaceTerrain }}
							m²
						</div>
					</div>

					{# 3. Indicateurs de progression (Inspiré du tableau) #}
					<div class="col">
						<div
							class="row g-4">
							{# Paiement #}
							<div class="col-6">
								{% set pctPaye = souscription.pourcentagePaiement %}
								<div class="d-flex justify-content-between align-items-center mb-1">
									<span class="small fw-bold text-uppercase text-muted" style="font-size: 0.65rem;">Recouvrement</span>
									<span class="small fw-bold text-success">{{ pctPaye }}%</span>
								</div>
								<div class="progress" style="height: 8px; background-color: #eee;">
									<div class="progress-bar bg-success" role="progressbar" style="width: {{ pctPaye }}%" aria-valuenow="{{ pctPaye }}" aria-valuemin="0" aria-valuemax="100"></div>
								</div>
								<div class="text-muted mt-1" style="font-size: 0.7rem;">
									{{ souscription.montantTotalDu|number_format(0, ',', ' ') }}
									F (Total)
								</div>
							</div>

							{# Chantier #}
							<div class="col-6">
								{% set pctChantier = souscription.evolutionChantier %}
								<div class="d-flex justify-content-between align-items-center mb-1">
									<span class="small fw-bold text-uppercase text-muted" style="font-size: 0.65rem;">Chantier</span>
									<span class="small fw-bold text-info">{{ pctChantier }}%</span>
								</div>
								<div class="progress" style="height: 8px; background-color: #eee;">
									<div class="progress-bar bg-info" role="progressbar" style="width: {{ pctChantier }}%" aria-valuenow="{{ pctChantier }}" aria-valuemin="0" aria-valuemax="100"></div>
								</div>
								<div class="text-muted mt-1" style="font-size: 0.7rem;">
									Travaux effectués
								</div>
							</div>
						</div>
					</div>

					{# 4. Statut #}
					<div class="col-auto text-end ms-3">
						<div class="small text-muted mb-1" style="font-size: 0.7rem;">Statut du dossier</div>
						<span class="badge bg-{{ souscription.statutDossier.getColor() }} p-2 shadow-sm d-block">
							<i class="fas fa-info-circle me-1"></i>
							{{ souscription.statutDossier.getLabel() }}
						</span>
					</div>
				</div>
			</div>
		</div>

		{# Navigation par onglets (Style "Tabs Custom" épuré) #}
		<div class="card border-0 shadow-sm mb-4">
			<div class="card-header bg-white border-bottom-0 pt-2">
				<ul class="nav nav-tabs nav-tabs-custom card-header-tabs nav-fill" id="mgmtTab" role="tablist">

					<li class="nav-item">
						<a class="nav-link active" data-bs-toggle="tab" href="#profil" role="tab">
							<i class="fas fa-user-circle me-2"></i>Infos Client
						</a>
					</li>

					<li class="nav-item">
						<a class="nav-link " data-bs-toggle="tab" href="#projet" role="tab">
							<i class="fas fa-chart-pie me-2"></i>Projet
						</a>
					</li>


					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="tab" href="#paiement" role="tab">
							<i class="fas fa-money-check-alt me-2"></i>Recouvrement
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="tab" href="#chantier" role="tab">
							<i class="fas fa-hard-hat me-2"></i>Chantier
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="tab" href="#crm" role="tab">
							<i class="fas fa-comments me-2"></i>Échanges
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="tab" href="#docs" role="tab">
							<i class="fas fa-folder-open me-2"></i>Documents
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="tab" href="#support" role="tab">
							<i class="fas fa-headset me-2"></i>Support
						</a>
					</li>
				</ul>
			</div>
		</div>

		{# Contenu des onglets - Chargement via render(controller) #}
		<div class="tab-content border-0 bg-white p-4">


			<div
				class="tab-pane fade show active" id="profil" role="tabpanel">
				{# Conteneur Flex pour aligner le bouton à droite #}
				<div class="d-flex justify-content-end mb-3">
					<button class="btn btn-sm btn-primary border btn-ajax-modal shadow-sm" data-url="{{ path('shared_user_edit_modal', {id: souscription.client.id}) }}">
						<i class="fas fa-user-edit me-1"></i>
						Modifier les coordonnées
					</button>
				</div>
				{{ include('_shared/user/show.html.twig', {'user': souscription.client}) }}
			</div>

			<div class="tab-pane fade " id="projet" role="tabpanel">
				{{ include('_shared/lot/show.html.twig', {'lot': souscription.lot}) }}
			</div>


			<div class="tab-pane fade" id="paiement" role="tabpanel">

				<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
					<center>
						<button class="btn btn-sm btn-primary border btn-ajax-modal shadow-sm" data-url="{{ path('shared_paiement_new_modal', {id: souscription.id}) }}">
							<i class="fas fa-user-edit me-1"></i>
							Ajouter un paiement
						</button>
					</div>
				</center>

				{% if souscription.modeFinancement and souscription.modeFinancement.value == 'ECHEANCIER' %}
					{{ include('_shared/paiement/_list_echeancier.html.twig', {
																'echeanciers': souscription.echeanciers,
																'souscription': souscription
															}) }}
				{% else %}
					{{ include('_shared/paiement/_list_simple.html.twig', {'souscription': souscription, 'paiements': souscription.paiements  }) }}
				{% endif %}
			</div>

			<div class="tab-pane fade" id="chantier" role="tabpanel">
				{{ render(controller('App\\Controller\\Shared\\LotSharedController::etapesFragment', {'id': souscription.lot.id})) }}

			</div>

			<div class="tab-pane fade" id="crm" role="tabpanel">
				{{ render(controller('App\\Controller\\Commercial\\Tabs\\CRMTabController::index', { 'id': souscription.id })) }}
			</div>

			<div class="tab-pane fade" id="docs" role="tabpanel">
				{{ render(controller('App\\Controller\\Shared\\DocumentSharedController::renderInlineManager', {
                                    'targetType': 'CLIENT',
                                    'targetId': souscription.client.id
                                })) }}
			</div>

			<div class="tab-pane fade" id="support" role="tabpanel">
				{{ render(controller('App\\Controller\\Commercial\\Tabs\\SupportTabController::index', { 'id': souscription.id })) }}
			</div>
		</div>
	</div>

	<style>
		/* Nouveau style d'onglets soulignés */
		.nav-tabs-custom .nav-link {
			border: none;
			padding: 1.2rem 0.5rem;
			color: #6c757d;
			border-bottom: 3px solid transparent;
			transition: all 0.3s ease;
			font-size: 0.82rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.3px;
			background: transparent !important;
		}

		/* État Actif : Couleur primaire et trait en bas */
		.nav-tabs-custom .nav-link.active {
			color: #4e73df !important;
			border-bottom-color: #4e73df !important;
		}

		/* État Survol : Trait gris léger */
		.nav-tabs-custom .nav-link:hover:not(.active) {
			border-bottom-color: #dee2e6;
			color: #4e73df;
		}

		/* Animation douce pour le contenu */
		.tab-pane {
			animation: fadeInTab 0.3s ease-in-out;
		}

		@keyframes fadeInTab {
			from {
				opacity: 0;
				transform: translateY(8px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.bg-soft-primary {
			background-color: rgba(78, 115, 223, 0.1);
		}
	</style>
{% endblock %}